如何在 Electron 中添加具有 "Inspect Element" 选项的右键单击菜单，如 Chrome？

Question

我正在构建一个 Electron 应用程序，我想检查特定的 UI 元素。我打开了用于开发的 Chrome 开发工具，但我想要的是能够右键单击 UI 元素并选择 "Inspect Element"，就像我在 Google Chrome。目前，右键单击不会在我的样板 Electron 应用程序中执行任何操作。我该如何启用它？

Answer 1

Electron 有一个名为 win.inspectElement(x, y) 的内置函数。

通过创建带有 MenuItem 的 Electron Menu，可以将此功能作为一个选项包含在右键单击上下文菜单中。在客户端调用以下命令（又名 renderer 进程）Javascript:

// Importing this adds a right-click menu with 'Inspect Element' option
const remote = require('remote')
const Menu = remote.require('menu')
const MenuItem = remote.require('menu-item')

let rightClickPosition = null

const menu = new Menu()
const menuItem = new MenuItem({
  label: 'Inspect Element',
  click: () => {
    remote.getCurrentWindow().inspectElement(rightClickPosition.x, rightClickPosition.y)
  }
})
menu.append(menuItem)

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  rightClickPosition = {x: e.x, y: e.y}
  menu.popup(remote.getCurrentWindow())
}, false)

Answer 2

尝试electron-context-menu。它添加了 inspect element、copy 和 paste.

如何在 Electron 中添加具有 "Inspect Element" 选项的右键单击菜单，如 Chrome？

How to add a right-click menu in Electron that has "Inspect Element" option like Chrome?

electron