如何在 Electron 中包含 Chrome DevTools? [英] How to include Chrome DevTools in Electron?

问题描述

我仍然是 Electron 的新手，我目前正在关注 这里.

I'm still new to Electron which I'm currently following here.

我已阅读此 页面，了解如何包含Chrome DevTools 以便我可以轻松调试我的应用程序.我已经按照文档进行了操作，但是一旦执行 electron <app-name> 命令，它就会返回一个错误:提供的应用程序不是有效的电子应用程序，请阅读有关如何操作的文档写一个...

I've read this page regarding on how to include the Chrome DevTools so that I can debug my application easily. I've followed the documentation but once I execute the electron <app-name> command it returns an error: The app provided is not a valid electron app, please read the docs on how to write one...

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

Here's the block of code from my main.js file:

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

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

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

That is how my project structure looks like:

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

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

Any help would be greatly appreciated. Thanks!

推荐答案

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

Maybe I am misunderstanding, but you can just do ctrl + shift + I to pull up dev tools.

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

Or alternatively if you are wanting to do it programmatically, the way I do it is include the following lines in my main.js file that is passed to electron.

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

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

I believe part of your problem may be that you aren't waiting for the app to be ready before you try to do stuff with it.

这篇关于如何在 Electron 中包含 Chrome DevTools?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！