如何在Electron Framework中使用React Dev Tools

本文概述

  • A.简单的方法
  • B.任重而道远
使用Google Chrome的Elements Inspector检查DOM元素非常好用且容易。但是, 当你使用React时, 这可能会非常棘手, 因此Facebook的Guys为浏览器开发了广为人知的React Dev Tools扩展。 React Developer Tools使你可以检查React组件层次结构, 包括组件属性和状态。它既作为浏览器扩展(对于Chrome和Firefox), 又作为独立的应用程序存在(与Safari, IE和React Native等其他环境一起使用)。
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:
如何在Electron Framework中使用React Dev Tools

文章图片
记住该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。
在这种情况下, 我们位于Windows平台上, 因此它位于C:\ Users \ sdkca \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Extensions。在这里, 你将根据已安装的扩展文件夹找到ID为名称的文件夹:
如何在Electron Framework中使用React Dev Tools

文章图片
我们感兴趣的是使用提到的ID标识的React扩展, 将其打开并复制所需版本的名称(如果有两个以上的文件夹)。在这种情况下, 我们只有1个版本, 即2.5.0_0:
如何在Electron Framework中使用React Dev Tools

文章图片
现在, 我们可以建立这种情况下扩展名的绝对路径: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。
编码愉快!

    推荐阅读