Electron - 如何添加react dev工具

Question

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

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

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

Answer 1

这是Electron> = 1.2.1版本的解决方案

1-在您的app文件夹中

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

2-打开您的电子应用程序,单击(查看/切换开发人员工具).在控制台选项卡中插入以下代码并按Enter键:

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

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

4-完成!

看下面的屏幕截图

Answer 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()
})