如何将Inspect Element右键单击添加到电子应用程序中？ （就像在Google Chrome中一样）

Question

我正在尝试将Inspect元素右键单击添加到我的电子应用程序中，我找到了有关此内容的先前文章，但这已经有4年的历史了，我不知道在哪里包含此内容。我已经设法使devtools自动打开，但是现在我想添加右键单击检查元素。我的问题是。

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

Answer 1

将以下代码添加到窗口的渲染器过程代码中。 请注意，您可能必须调整前两行，具体取决于已经定义了哪些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
);

参考文献：

• webFrame.getZoomFactor()
• contents.inspectElement(x, y)
• menu.popup(options)

关于如何使用快捷方式打开devTools的情况，如果菜单栏包含一个带有菜单项的子菜单，该菜单项的role为toggledevtools，这将自动发生。例如，在您的主流程代码中，将其添加到菜单模板中将为Toggle Developer Tools菜单项提供标准的键盘快捷键：

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

参考：Menu Item Roles

更新：

似乎有一种更强大，更灵活的方式来处理webContents级别的上下文菜单，方法是监听自Electron 1.0.2起记录的'context-menu'事件。

一个重要的功能是不再需要考虑缩放系数，在x中返回的y和params坐标总是正确的。

参考：webContents Event: 'context-menu'

以下是使用此方法的一些渲染器过程代码：

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