如何在Electron中添加具有；“检查元件”；像Chrome这样的选项？

我正在构建一个电子应用程序，我想检查特定的UI元素。我已经打开了Chrome开发工具进行开发，但我想要的是能够右键单击UI元素并选择“Inspect element”，就像我在Google Chrome中一样。目前，右键单击在我的样板电子应用程序中没有任何作用。如何启用此功能？

Electron有一个名为的内置函数

通过使用

MenuItem

创建电子

菜单

，可以将此功能作为选项包含在右键单击上下文菜单中。在客户端（又名渲染器进程）Javascript中调用以下命令：

//导入此项会添加一个带有“检查元素”选项的右键单击菜单
const remote=require（'remote'）
const Menu=remote.require（'Menu'）
const MenuItem=remote.require（'菜单项'）
让rightClickPosition=null
常量菜单=新菜单（）
const menuItem=新的menuItem({
标签：“检查元件”，
点击：（）=>{
remote.getCurrentWindow（）.inspectElement（rightClickPosition.x，rightClickPosition.y）
}
})
menu.append（menuItem）
window.addEventListener（'contextmenu'，（e）=>{
e、 预防默认值（）
右键单击位置={x:e.x，y:e.y}
menu.popup（remote.getCurrentWindow（））
}，错）

试试看。它添加了

检查元素

、

复制

和

粘贴

，以防有人发现它有用，我根据您的答案在github上创建了一个repo。您可以在这里找到它：在最新版本的electron（0.36.11）中，我必须在事件处理程序中调用

remote.getCurrentWindow（）

，而不是缓存在currentWindow常量中。如果您使用键入，

inspectElement

在

BrowserWindow

上不存在。您可以改为执行

remote.getCurrentWindow（）.WebContent.inspectElement

；此外，现在还有一个非常适合锻造的。！我想指出的是，这项功能不属于本机应用程序，所以应该在生产中删除它