如何在Electron中添加具有“检查元素”选项的右键菜单，如Chrome？

Question

我正在构建一个Electron应用程序，我想检查特定的UI元素。我开放Chrome开发工具用于开发，但我想要的是能够右键单击UI元素并选择“检查元素”，就像我可以在谷歌浏览器中一样。目前，右键单击在我的样板电子应用程序中没有做任何事情。我该如何启用它？

Answer 1

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

通过创建带Menu的电子MenuItem，可以在右键单击上下文菜单中将此功能作为选项包括在内。在客户端（也称为渲染器进程）中调用以下内容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。