如何在Electron中包含镀铬工具？

我对电子还是个新手，我现在正在关注它

---

我读过这篇文章，是关于如何包含，以便可以轻松调试我的应用程序。我已经按照文档进行了操作，但一旦执行

electron

命令，它就会返回一个错误：

提供的应用程序不是有效的electron应用程序，请阅读有关如何编写的文档…

下面是我的

main.js

文件中的代码块：

var-app=require（'app'）；
var BrowserWindow=require（'browser-window'）；
//添加用于调试的Chrome DevTools扩展
require（'remote'）。require（'browser-window'）。addDevToolsExtension（'../react devtools'））

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

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

---

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

很可能，Electron无法理解您提供的应用程序文件夹的路径。必须提供包含

package.json

的应用程序目录的相对或绝对路径。例如，如果应用程序的

package.json

文件位于

/home/user/my_awesome\u app/package.json

，则为了启动应用程序，必须发出以下命令：

electron/home/user/my\u awesome\u应用程序

还要注意，

package.json

文件中的

main

属性指示应用程序的入口点。在您的情况下，它必须是这样的：

“main”：“src/main.js”

应用程序的名称是包含应用程序所有树的文件夹的名称。因此，要执行，您必须写入，例如，您的文件夹名为Electron

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

---

（对不起，我的英语有点生疏）

所以，在您要求以下内容之后：

var-app=require（'app'）；

您可以使用以下代码（我在我的应用程序中使用）：

app.commandLine.appendSwitch（'remote-debug-port'，'8315'）； app.commandLine.appendSwitch（'host-rules'，'MAP*127.0.0.1'）； 通过访问以下地址，我可以在Chrome中调试应用程序：

http://127.0.0.1:8315

我希望这对你有帮助。我也是电子新手

---

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

也许我有点误解，但您只需执行ctrl+shift+I即可调出开发工具

或者，如果您希望以编程方式执行此操作，我的方法是在传递给electron的

main.js

文件中包含以下行

var-app=require（'app'）；
var BrowserWindows=require（'browser-window'）；
app.on（'ready'，function（）{
主窗口=新浏览器窗口（{宽度：800，高度：600}）；
main window.webContents.openDevTools（）；
}

---

我相信你的部分问题可能是你没有等到应用程序准备好后再尝试使用它。

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

mainWindow=新浏览器窗口（{宽度：1024，高度：768}）；
loadURL（“您的url”）；
main window.webContents.openDevTools（）；
main window.webContents.on（'devtools-opened'，（）=>{
setImmediate（（）=>{
//在这里完全打开开发工具之后，做任何你想做的事情
main window.focus（）；
});
});

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

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

npm安装--保存开发工具

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

require（'electron-react-devtools'）。安装（）

3-重新加载/刷新你的electron应用程序页面，你会看到react dev工具出现

4-完成

---

见下面的屏幕截图

---

为了能够通过按键打开开发工具，我将其添加到我的

index.html

：

//电子
如果（需要的类型！==“未定义”）{
const currentWebContent=require（'electron'）.remote.getCurrentWebContent（）；
document.addEventListener（'keyup'，（{key，ctrlKey，shiftKey，metaKey，altKey}）=>{
如果(
键=='F12'||
（ctrlKey&&shiftKey&&key==='I'）||
（metaKey&&altKey&&key==='i'）
) {
CurrentWebContent.openDevTools（）；
}
});
}

请注意，这允许production electron应用程序的任何用户使用常用键盘快捷键访问开发工具（功能：PC上的F12或ctrl+shift+I，Mac上的cmd+option+I）

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

webPreferences：{
devTools：对
}

是的，我已经完成了这一部分，我能够很好地运行我的应用程序。只有当我尝试添加

react devtools

进行调试时，问题才会出现。这时错误会突然出现。当你调用

addDevToolsExtension

时，你会遇到什么样的错误？

提供的应用程序不是有效的电子应用程序，请阅读说明cs关于如何编写一个..blabla

当我添加行

require（'remote'）.require（'browser-window'）.addDevToolsExtension（'../react devtools'）时会出现它

您可以参考上面我的项目结构。哦，我没有首先注意到一个重要的事实。

远程

模块用于从渲染器进程远程调用主进程的方法。反之亦然。您必须清楚，

浏览器窗口

是在主进程中创建的，并且是受控的因此，为了从渲染器添加React developer工具，您应该在渲染器端发出相同的命令（例如，inside index.html）：

require（'remote'）。require（'browser-window'）。addDevToolsExtension（'React-devt'）‌​(ools)