如何将检查元素右键单击添加到电子应用程序中？（就像在谷歌Chrome）

Question

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

如何以及在何处添加inspect元素作为右键单击以在整个应用程序中全局工作，以及如何使用快捷方式打开开发工具。目前，我在main中自动打开Devtools。js脚本，但当我点击它离开，我没有办法把它带回来。提前谢谢你的帮助。

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.inspect元素（x， y）
• menu.popup（选项）

至于如何使用快捷方式打开devTools，如果您的菜单栏包含一个子菜单，该菜单项的角色为切换devTools，则会自动发生这种情况。例如，在主流程代码中，将其添加到菜单模板将提供一个带有标准键盘快捷键的切换开发人员工具菜单项：

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

参考：菜单项角色

更新：

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

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

参考：WebContent事件：“上下文菜单”

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

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