如何在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 import
import 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)
});

另外, 如果你使用require而不是import, 那么代码将如下所示：

// Using require
const { 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 Tools
    const { 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。

在这种情况下, 我们位于Windows平台上, 因此它位于C：\ Users \ sdkca \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Extensions。在这里, 你将根据已安装的扩展文件夹找到ID为名称的文件夹：

我们感兴趣的是使用提到的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 another
BrowserWindow.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 another
  BrowserWindow.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。

编码愉快！