如何在 Electron 中包含 Chrome DevTools？答案

【问题标题】：How to include Chrome DevTools in Electron?如何在 Electron 中包含 Chrome DevTools？
【发布时间】：2015-07-29 10:47:48
【问题描述】：

我仍然是 Electron 的新手，我目前正在关注 here。

我已阅读此page，了解如何包含Chrome DevTools，以便我可以轻松调试我的应用程序。我已经按照文档进行了操作，但是一旦执行 electron <app-name> 命令，它就会返回错误：The app provided is not a valid electron app, please read the docs on how to write one...

这是我的 main.js 文件中的代码块：

var app = require('app');
var BrowserWindow = require('browser-window');

// Add Chrome DevTools extension for debugging
require('remote').require('browser-window').addDevToolsExtension('../react-devtools')

这就是我的项目结构的样子：

- react-devtools
- src
  -- index.html
  -- main.js
- package.json

任何帮助将不胜感激。谢谢！

【问题讨论】：

我知道这个问题是针对为什么会出现这个错误，我不确定这是否与开发工具扩展不同，但请尝试在 BrowserWindow 对象上调用 .openDevTools() 方法创建并查看是否可以满足您的需求。

标签： electron

【解决方案1】：

也许我理解错了，但是你可以这样做 ctrl + shift + I 来调出开发工具。

或者，如果您想以编程方式执行此操作，我的方法是在传递给电子的 main.js 文件中包含以下行。

var app = require('app');
var BrowserWindows = require('browser-window');
    
app.on('ready', function(){
    mainWindow = new BrowserWindow({width:800, height:600});
    mainWindow.webContents.openDevTools();
}

我相信您的部分问题可能是您没有等待应用准备就绪，然后再尝试使用它。

【讨论】：

你在哪里想出 Ctrl + Shift + I 打开 devtools？
哦，我明白了 - 这通常适用于 Chrome。但是，在 Electron 中不会。您需要为快捷方式添加一个侦听器。不过你的答案的第二部分是正确的
Ctrl + Shift + 我肯定仍然可以工作到 Electron 2.0.0。我只是仔细检查了。
嗯，我没有观察到这种行为。也许我的设置不允许...

【解决方案2】：

所以，在您需要以下内容之后：

var app = require('app');

您可以使用以下代码（我在我的应用程序中使用它）：

app.commandLine.appendSwitch('remote-debugging-port', '8315');
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');

访问以下地址可以让我在 Chrome 中调试应用程序：

http://127.0.0.1:8315

我希望这对您有所帮助。我也是 Electron 新手！

如果您还需要对底层浏览器引擎做一些配置，请参考the docs。

【讨论】：

【解决方案3】：

你可以这样打开开发工具：

mainWindow = new BrowserWindow({ width: 1024, height: 768 });
mainWindow.loadURL('your url');
mainWindow.webContents.openDevTools();
mainWindow.webContents.on('devtools-opened', () => {
    setImmediate(() => {
        // do whatever you want to do after dev tool completely opened here
        mainWindow.focus();
    });
});

【讨论】：

【解决方案4】：

很可能，Electron 无法理解您提供的应用程序文件夹的路径。您必须提供包含package.json 的应用程序目录的相对或绝对路径。例如，如果您的应用程序的package.json 文件位于/home/user/my_awesome_app/package.json，那么为了启动应用程序，您必须发出以下命令：

electron /home/user/my_awesome_app

还要注意package.json 文件中的main 属性表示您的应用程序的入口点。在您的情况下，它必须是这样的：

 "main": "src/main.js"

【讨论】：

是的，我已经完成了那部分，我能够很好地运行我的应用程序。仅当我尝试添加 react-devtools 以进行调试时才会出现此问题。这就是错误弹出的时候。
调用addDevToolsExtension会出现什么样的错误？
The app provided is not a valid electron app, please read the docs on how to write one..blabla 在我添加require('remote').require('browser-window').addDevToolsExtension('../react-devtools') 行时出现，您可以参考我上面的项目结构以供参考。
哦，我首先没有注意到一个重要的事实。 remote 模块用于从渲染器进程远程调用主进程的方法。反之亦然。你必须清楚，browser-window是在主进程中创建的，由主进程控制。因此，为了从渲染器添加 React 开发人员工具，您应该在渲染器端发出相同的命令（例如，在 index.html 中）：require('remote').require('browser-window').addDevToolsExtension('react-devt‌ools')。

【解决方案5】：

应用程序的名称是包含应用程序所有树的文件夹的名称。因此，要执行，您必须编写，以防您的文件夹名为 Electron；

electron Electron

始终在您的文件夹所在的路径中提示。希望对您有所帮助。

（对不起我的英语，有点生疏）

【讨论】：

【解决方案6】：

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

1- 在您的应用文件夹中

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

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

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

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

4- 完成！

请参阅下面的屏幕截图

【讨论】：

【解决方案7】：

为了能够通过击键打开开发工具，我将其添加到我的index.html：

<script>
    // for electron
    if (typeof require !== 'undefined') {
        const currentWebContents = require('electron').remote.getCurrentWebContents();
        document.addEventListener('keyup', ({ key, ctrlKey, shiftKey, metaKey, altKey }) => {
            if (
                key === 'F12' ||
                (ctrlKey && shiftKey && key === 'I') ||
                (metaKey && altKey && key === 'i')
            ) {
                currentWebContents.openDevTools();
            }
        });
    }
</script>

请注意，这允许生产电子应用程序的任何用户使用通用键盘快捷键访问开发工具（功能：F12 或 ctrl + shift + I 在 PC 上，cmd + option + i 在 Mac 上）。

不对我有用的一件事是将它传递给 BrowserWindow 构造函数：

webPreferences: {
    devTools: true
}

【讨论】：

【解决方案8】：

我知道这可能不是如何安装devtools，但我发现alert 在electron 中重新连接用于webviews。这意味着你可以随时拍摄它来看看简单的风格。

  alert('123')

对于复杂的东西，我相信webview也有一个executeJavascript功能，也许你可以在那里运行console.log。

【讨论】：