如何在Electron中添加右键菜单，并包含类似Chrome的“检查元素”选项？

Question

我正在构建一个Electron应用程序，想要检查特定的UI元素。我已经打开了Chrome开发工具，但是我想要的是能够右键单击UI元素并选择“检查元素”，就像在Google Chrome中一样。目前，在我的Electron模板应用程序中右键单击没有任何反应。如何启用此功能？

- Tanner Semerad

Answer 1

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

要在右键菜单中包含此函数作为选项，可以通过创建带有MenuItem的ElectronMenu实现。 在客户端（也称为渲染器进程）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)

- Tanner Semerad

---

如果有人觉得有用的话，我基于你的答案在 GitHub 上创建了一个仓库。您可以在此处找到它：debug-menu。 - Andrea Parodi

在最新版本的 Electron (0.36.11) 中，我必须在事件处理程序中调用 remote.getCurrentWindow() 才能使其正常工作，而不能将其缓存到 currentWindow 常量中。 - enjalot

如果您正在使用Typings，则 BrowserWindow上不存在inspectElement方法。您可以改用remote.getCurrentWindow().webContents.inspectElement方法。 - Mats

导入语句已更改；文档中还有一个示例。 - chris

Answer 2

试试使用electron-context-menu。它添加了检查元素，复制和粘贴功能。

- Oded Breiner

---

这对 Forge 也非常有效！但是我想指出的是，这个功能不属于本地应用程序，因此在生产中应该将其删除。 - Stamatis Deliyannis

此软件包生成的上下文菜单无法根据点击位置进行更改。 - golopot