electron - 如何在 Electron 中包含 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

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

score 27 · Accepted Answer

也许我误解了，但你可以做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();
}

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

score 16 · Accepted Answer

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

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

我希望这能够帮到你。我也是电子新手！

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

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

electron /home/user/my_awesome_app

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

 "main": "src/main.js"

score 0 · Accepted Answer

The name of the application is the name of the folder which contains all the tree of your application. So, to execute, you have to write, in case your folder is named Electron for example;

electron Electron

Always in prompt in the path that your folder is located. Hope this help.

(Sorry for my English, a little rusty)

score 0 · Accepted Answer

为了通过击键启用打开开发工具，我将其添加到我的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
}

score 0 · Accepted Answer

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

1-在您的应用程序文件夹中

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

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

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

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

4-完成！

请参阅下面的屏幕截图

score 0 · Accepted Answer

我知道这可能不是如何安装devtools的，但我发现在 webviewsalert中重新连接了。electron这意味着任何时候你都可以通过拍摄来看到简单的风格。

  alert('123')

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

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

8 回答 8

Related

Reference