electron - 如何将 Inspect Element 右键单击​​添加到 Electron 应用程序中？ (就像在谷歌浏览器中一样)

Question

我正在尝试将 Inspect 元素右键单击到我的 Electron 应用程序中，我找到了一篇关于此的前一篇文章，但这是 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 处，似乎有一种更强大、更灵活的处理上下文菜单的方法。水平，通过听 'context-menu'事件，自 Electron 1.0.2 起记录。

一个重要的特性是不再需要考虑缩放系数， 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 ();
    }
);