本文概述
- A.简单的方法
- B.任重而道远
ReactJS和Electron是一个很棒的组合, 可以为Desktop创建非常快速的应用程序, 因此, 如果你正在使用这些技术, 则可能也想使用Electron中的React Dev Tools进行调试。这很容易实现, 我们将在本文中向你展示。你可以按照以下两种方法之一进行操作:
重要 请记住, 只有在你的项目实现了react时, 你才会看到React选项卡, 否则React选项卡将不会以与在Chrome浏览器中相同的方式显示。
A.简单的方法 如果你想尽可能轻松快捷地实现此功能, 可以使用@MarshallOfSound编写的electronic-devtools-installer模块。这是将DevTool扩展安装到Electron中的一种简便方法, 因此你不必费心下载扩展, 找到正确的文件夹, 然后为每个人的计算机配置路径。
在终端上使用以下命令安装devtools安装程序:
npm install electron-devtools-installer --save-dev
或者, 如果你使用yarn而不是NPM, 则执行:
yarn add electron-devtools-installer -D
安装模块后, 你将可以在电子脚本中要求它。有关此库的更多信息, 请访问Github上的官方存储库。
如何运作?
实际上, 如果要将扩展安装到Electron中, 则需要执行几个步骤(在这种情况下, 请参阅步骤B), 但是此模块会自动为你完成所有操作。它直接从Chrome WebStore下载chrome扩展程序, 然后将其扩展到应用程序的userData目录, 然后再将其加载到Electron中。如果你想知道库在后台执行的操作, 请参阅步骤B。
使用该模块安装扩展程序所需要做的就是在触发Electron的ready事件后执行以下代码:
// using importimport installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';
installExtension(REACT_DEVELOPER_TOOLS).then((name) =>
{console.log(`Added Extension:${name}`);
}).catch((err) =>
{console.log('An error occurred: ', err)});
【如何在Electron Framework中使用React Dev Tools】另外, 如果你使用require而不是import, 那么代码将如下所示:
// Using requireconst { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
installExtension(REACT_DEVELOPER_TOOLS).then((name) =>
{console.log(`Added Extension:${name}`);
}).catch((err) =>
{console.log('An error occurred: ', err);
});
此代码(以前的任何代码段)通常只能在主进程中执行, 否则在渲染器进程中最有可能失败并在控制台中显示很多错误。这意味着你需要执行它, 例如在main.js文件中的默认电子应用程序中:
function createWindow() {// Create the browser window.mainWindow = new BrowserWindow({ width: 800, height: 600 })// and load the index.html of the app.mainWindow.loadURL(url.format({pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true}))// Open the DevTools.// mainWindow.webContents.openDevTools()// Emitted when the window is closed.mainWindow.on('closed', function () {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.mainWindow = null})// Install React Dev Toolsconst { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
installExtension(REACT_DEVELOPER_TOOLS).then((name) =>
{console.log(`Added Extension:${name}`);
}).catch((err) =>
{console.log('An error occurred: ', err);
});
}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)
使用成功的实现, 启动应用程序, 你应该在控制台(启动Electron)中看到以下消息:已添加扩展:React Developer Tools。
安装其他扩展
通过该模块遵循的过程, 从技术上讲, 你将能够在你的Electron应用程序中安装任何chrome扩展程序。由于它是专门为开发而设计的, 因此它已经存储了一些最常用的开发人员工具的ID作为常量, 你可以简单地将其导入:
import installExtension, {EMBER_INSPECTOR, REACT_DEVELOPER_TOOLS, BACKBONE_DEBUGGER, JQUERY_DEBUGGER, ANGULARJS_BATARANG, VUEJS_DEVTOOLS, REDUX_DEVTOOLS, REACT_PERF, CYCLEJS_DEVTOOL, } from 'electron-devtools-installer';
并以与React Dev Tools相同的方式进行安装。
B.任重而道远 如果你不愿意为此安装模块, 则可以按照Electron的规范手动安装扩展程序:
B.1在Chrome浏览器中安装扩展程序并获取扩展程序ID
首先, 你需要在Chrome浏览器中安装React Developer Tools作为扩展。这会将其安装在你的系统上, 你稍后将可以从Electron访问它, 因为首先在该视图上启用Developer模式, 你将看到任何扩展的ID, React扩展的ID为fmkadmapgofadopljbjfkapdkoienihi:
文章图片
记住该ID, 因为下一步将需要它。
B.2获取扩展的绝对路径
现在, 你需要找出Chrome用于存储扩展名的文件系统位置, 该位置在每个操作系统上都明显不同:
- 在Windows上为%LOCALAPPDATA%\ Google \ Chrome \ User Data \ Default \ Extensions;
- 在Linux上可能是:
- ?/ .config / google-chrome /默认/扩展名/
- ?/ .config / google-chrome-beta /默认/扩展名/
- ?/ .config / google-chrome-canary /默认/扩展名/
- ?/ .config / chromium /默认/扩展名/
- 在macOS上, 它是?/ Library / Application Support / Google / Chrome / Default / Extensions。
文章图片
我们感兴趣的是使用提到的ID标识的React扩展, 将其打开并复制所需版本的名称(如果有两个以上的文件夹)。在这种情况下, 我们只有1个版本, 即2.5.0_0:
文章图片
现在, 我们可以建立这种情况下扩展名的绝对路径:C:\ Users \ sdkca \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Extensions \ fmkadmapgofadopljbjfkapdkoienihi \ 2.5.0_0。
B.3从绝对路径安装扩展
最后, 你可以使用BrowserWindow的addDevToolsExtension方法安装扩展。该方法将扩展文件夹的路径作为第一个参数。可以在初始化了电子的main.js文件中完成该实现:
// As we are in windows, escape the slash with anotherBrowserWindow.addDevToolsExtension("C:\\Users\\sdkca\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\fmkadmapgofadopljbjfkapdkoienihi\\2.5.0_0");
如前所述, 扩展只能在Electron的ready事件之后安装:
function createWindow () {// Create the browser window.mainWindow = new BrowserWindow({width: 800, height: 600})// and load the index.html of the app.mainWindow.loadURL(url.format({pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true}))// Open the DevTools.// mainWindow.webContents.openDevTools()// Emitted when the window is closed.mainWindow.on('closed', function () {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.mainWindow = null})// As we are in windows, escape the slash with anotherBrowserWindow.addDevToolsExtension("C:\\Users\\sdkca\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\fmkadmapgofadopljbjfkapdkoienihi\\2.5.0_0");
}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)
现在, 你可以像在浏览器中一样在项目中使用React Dev Tools。
编码愉快!
推荐阅读
- 如何处理Electron Framework中的”拖放文件”功能
- Matreshka.js(创建单页应用程序的简单JavaScript框架)
- Prepack(用于JavaScript的部分评估程序,可生成有效的JavaScript)
- Carbon(创建和共享代码段精美图片的在线工具)
- Keeweb(与KeePass兼容的免费跨平台密码管理器)
- AppleScript-等待shell脚本完成
- Android字体可下载,我如何从常规更改为semibold
- 找不到模块'./app/server.app.module.ngfactory'
- 在为arm64 Android手机构建应用程序包时,在ApplicationInfo.nativeLibraryDir中找不到本机库