Electron - 如何添加反应开发工具答案

【问题标题】：Electron - How to add react dev toolElectron - 如何添加反应开发工具
【发布时间】：2022-03-21 23:04:31
【问题描述】：

将反应开发工具添加到电子窗口的简单方法是什么？我尝试添加扩展哈希

BrowserWindow.addDevToolsExtension('path/to/extension/ade2343nd23k234bdb').15.01

但是当扩展更新时，我不得不手动更新 main.js 中的字符串。我正在寻找更好的方法。

【问题讨论】：

标签： electron

【解决方案1】：

这是 Electron

1- 在您的应用文件夹中

npm install --save-dev electron-react-devtools

2- 打开您的电子应用程序，单击（查看/切换开发人员工具）。在 console 选项卡中插入以下代码并回车：

 require('electron-react-devtools').install()

3- 重新加载/刷新您的电子应用页面，您将看到反应开发工具出现。

4- 完成！

请参阅下面的屏幕截图

【讨论】：

注意这个方法只安装当前会话的react devtools；每次启动应用程序时都必须这样做。
包裹被遗弃了，这是我的看法：npmjs.com/package/react-devtools-electron
@Zentryn 你是对的。您是否找到了一种永久访问工具的方法，而无需在每次启动应用时都重新运行此命令？
@DimitarNestorov 试图安装你的包得到TypeError: Cannot read property 'isReady' of undefined
@dWitty Electron 不久前更新了内部结构，我还没有时间修复它。有些人报告说即使使用最新版本的电子，他们也无法让它工作（不使用我的库）：github.com/electron/electron/issues/23662

【解决方案2】：

你可以像这样直接从你的 main.js 文件中添加 react devtools

const installExtensions = async () => {
  const installer = require('electron-devtools-installer')
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS
  const extensions = [
    'REACT_DEVELOPER_TOOLS',
    'REDUX_DEVTOOLS',
    'DEVTRON'
  ]

  return Promise
    .all(extensions.map(name => installer.default(installer[name], forceDownload)))
    .catch(console.log)
}

app.on('ready', async () => {
  if (dev && process.argv.indexOf('--noDevServer') === -1) {
    await installExtensions()
  }
  createWindow()
})

【讨论】：

【解决方案3】：

addDevToolsExtension不是实例方法，所以需要调用BrowserWindow.addDevToolsExtension('path/to/extension')。

【讨论】：

【解决方案4】：

以下解决方案对我有用 (https://github.com/MarshallOfSound/electron-devtools-installer#usage) -

npm install electron-devtools-installer --save-dev 
or 
yarn add electron-devtools-installer -D

import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer';
// Or if you can not use ES6 imports
/**
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
*/
const { app } = require('electron');

app.whenReady().then(() => {
    installExtension(REDUX_DEVTOOLS)
        .then((name) => console.log(`Added Extension:  ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});

【讨论】：

我没有看到 react 标签，是不是我遗漏了什么？

【解决方案5】：

如果您在启动 react-devtools 时看到空白组件，可能是因为您已按照 react-native 文档调试部分中的建议全局安装了该软件包。发生的情况是它没有连接到您的应用，因为它不是您的应用特定的。

你需要在本地安装。

npm install --save-dev react-devtools

或

yarn add -D react-devtools

【讨论】：