electron - 如何在 Electron 中包含 Chrome DevTools？

Question

我仍然是 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

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

Answer 1

也许我误解了，但你可以做 ctrl + shift + I 来拉起开发工具。
或者，如果您想以编程方式执行此操作，我的方法是在我的 main.js 中包含以下行传递给 Electron 的文件。

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

我相信您的部分问题可能是您在尝试使用它之前没有等待应用程序准备好。