Как добавить меню правого щелчка в Electron, у которого есть опция "Проверить элемент", например Chrome?

Я создаю приложение Electron, и я хотел бы проверить конкретные элементы пользовательского интерфейса. У меня есть инструменты разработчика Chrome для разработки, но я хочу, чтобы щелкнуть элемент пользовательского интерфейса правой кнопкой мыши и выбрать "Осмотреть элемент", как я могу, в Google Chrome. В настоящее время щелчок правой кнопкой мыши ничего не делает в моем приложении "Electron". Как я могу включить это?

ОТВЕТЫ

Ответ 1

Электрон имеет встроенную функцию 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)