Electron - 如何添加react dev工具

Question

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

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

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

Answer 1

这是Electron的解决方案＆gt; = 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()
})

Answer 3

<RelativePanel> <Button x:Name="LeftButton" Content="Left" HorizontalAlignment="Stretch" RelativePanel.AlignLeftWithPanel="True" RelativePanel.LeftOf="Divider" /> <Border x:Name="Divider" RelativePanel.AlignHorizontalCenterWithPanel="True"/> <Button x:Name="RightButton" Content="Right" HorizontalAlignment="Stretch" RelativePanel.AlignRightWithPanel="True" RelativePanel.RightOf="Divider" /> </RelativePanel> 不是实例方法，因此您需要调用addDevToolsExtension。

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