如何将Inspect Element右键单击添加到electron应用程序中？（就像谷歌浏览器一样）

我正在尝试将Inspect element右键单击包含到我的电子应用程序中，我发现了以前的一篇文章，但这篇文章已经有4年历史了，我不知道在哪里包含它。我已经设法让devtools自动打开，但现在我想添加右键单击inspect元素。我的问题是

---

如何以及在何处添加inspect元素作为右键单击以在整个应用程序中全局工作，以及如何使用快捷方式打开开发工具。目前，我在main.js脚本中自动打开Devtools，但当我单击它时，我无法将其恢复。提前感谢您的帮助。

将以下代码添加到窗口的渲染器进程中。 请注意，根据已经定义的API元素，您可能必须调整前两行

const { remote, webFrame } = require ('electron');
const { getCurrentWebContents, Menu, MenuItem } = remote;
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
    {
        label: 'Inspect Element',
        click: () =>
        {
            let factor = webFrame.getZoomFactor ();
            let x = Math.round (rightClickPosition.x * factor);
            let y = Math.round (rightClickPosition.y * factor);
            getCurrentWebContents ().inspectElement (x, y);
        }
    }
);
contextMenu.append (menuItem);
//
window.addEventListener
(
    'contextmenu',
    (event) =>
    {
        event.preventDefault ();
        rightClickPosition = { x: event.x, y: event.y };
        contextMenu.popup ();
    },
    false
);

参考资料：

至于如何使用快捷方式打开devTools，如果您的菜单栏包含一个子菜单，该菜单项的

角色
为
切换devTools
，则会自动发生这种情况。例如，在您的主流程代码中，将其添加到菜单模板将提供带有标准键盘快捷键的
切换开发人员工具
菜单项：

{
    label: "Developer",
    submenu:
    [
        { role: 'reload' },
        { role: 'toggledevtools' }
    ]
}

参考：

更新：

似乎有一种更强大、更灵活的方式来处理
webContents
级别的上下文菜单，方法是收听自Electron 1.0.2以来记录的
“上下文菜单”
事件

一个重要特性是不需要再考虑缩放因子，在
params
中返回的
x
和
y
坐标总是正确的

参考：

下面是一些使用此方法的可选渲染器进程代码：

const { getCurrentWebContents, Menu, MenuItem } = require ('electron').remote;
//
let webContents = getCurrentWebContents ();
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
    {
        label: 'Inspect Element',
        click: () =>
        {
            webContents.inspectElement (rightClickPosition.x, rightClickPosition.y);
        }
    }
);
contextMenu.append (menuItem);
//
webContents.on
(
    'context-menu',
    (event, params) =>
    {
        rightClickPosition = { x: params.x, y: params.y };
        contextMenu.popup ();
    }
);

嗨，谢谢你的帮助，不过我有个问题。我对电子很陌生。我的主要渲染过程是打开devtools的地方吗？因为当我启动我的应用程序时，它会立即打开devtools，所以我认为它是。我还得到一个错误，上面写着这
Uncaught异常：TypeError:无法在Object处分解“undefined”或“null”的属性“getCurrnetWebContents”。
我也不明白这意味着什么：（我想我把它放在了正确的位置。在Electron中，没有主渲染过程；相反，只有一个（而且只有一个）主渲染过程创建应用程序菜单和窗口的主进程，以及每个创建的浏览器窗口的一个渲染器进程（通常仅一个主窗口）。作为每个浏览器窗口一部分的DevTools可以在创建时使用
mainWindow.webContents.openDevTools（）自动打开
方法，但这通常会在公开发布时被注释掉。由于
remote
出现
undefined
，因此相关代码似乎没有从适当的渲染器进程中调用。此外，您的代码中还有一个输入错误：
getCurrnetWebContents
应该是
getCurrentWebContents
。…电子应用程序架构页面的一个良好开端是：