如何在电子中加入Chrome DevTools？

Question

我现在仍然是Electron的新手,我现在正在这里.

我已经阅读了有关如何包含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

任何帮助将不胜感激.谢谢!

Answer 1

也许我是误会,但你可以做ctrl + shift +我拉起开发工具.

或者,如果您想以编程方式执行此操作,我的方法是在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();
}

我相信您的部分问题可能是您在尝试使用它之前不等待应用程序准备就绪.

Answer 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的新手!

如果您还需要对底层浏览器引擎进行一些配置,请参阅文档.

Answer 3

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

electron /home/user/my_awesome_app

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

 "main": "src/main.js"