如何在电子产品中包含铬DevTools？

Question

我还是个新手，目前我正在关注here。

我已经阅读了关于如何包含Chrome DevTools的page，以便我可以轻松地调试我的应用程序。我遵循了文档，但是一旦我执行了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

任何帮助都将不胜感激。谢谢!

Answer 1

因此，在您完成以下要求之后：

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。

Answer 2

您可以像这样打开dev工具：

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

Answer 3

很可能，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"