I'm building an Electron application and I would like to inspect specific UI elements. I have the Chrome dev tools open for development, but what I want is to be able to right-click a UI element and choose "Inspect Element" like I can in Google Chrome. Currently, right-clicking doesn't do anything in my boilerplate Electron app. How can I enable this?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
回答1:
Electron has a built-in function called win.inspectElement(x, y).
Including this function as an option in a right-click context menu is possible by creating an Electron Menu
with a MenuItem
. Call the following in the client (aka renderer process) 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)
回答2:
Try this:
https://www.npmjs.com/package/electron-context-menu
It adds inspect element
, copy
and paste
.