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 +我来拉开开发工具。

或者如果您想以编程方式执行此操作，我的方法是在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的新手！

如果您还需要对底层浏览器引擎进行一些配置，请参阅the docs。

Answer 3

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

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 4

最有可能的是，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"

Answer 5

应用程序的名称是包含应用程序的所有树的文件夹的名称。所以要执行你必须写，以防你的文件夹名为Electron，例如;

电子电子

始终处于文件夹所在路径的提示符中。希望这有帮助。

（抱歉我的英文，可能有点生气）

Answer 6

这是Electron的解决方案＆gt; = 1.2.1版本

1-在您的app文件夹中

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

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

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

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

4-完成！

请参阅屏幕截图

Answer 7

要通过按键启用开发工具，我将其添加到了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）上）访问开发工具。

对我来说无效不起作用的一件事是将其传递给BrowserWindow构造函数：

webPreferences: {
    devTools: true
}

如何将Chrome DevTools包含在Electron中？

7 个答案: