如何在 Electron 中添加具有“检查元素"的右键菜单像Chrome这样的选项?

问题描述

我正在构建一个 Electron 应用程序，我想检查特定的 UI 元素.我打开了 Chrome 开发工具进行开发，但我想要的是能够像在 Google Chrome 中一样右键单击 UI 元素并选择检查元素".目前，右键单击在我的样板电子应用程序中没有任何作用.如何启用此功能?

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?

推荐答案

Electron 有一个名为 win.inspectElement(x, y).

Electron has a built-in function called win.inspectElement(x, y).

通过创建带有 MenuItem 的 Electron Menu 可以在右键单击上下文菜单中包含此功能作为选项.在客户端(又名 renderer 进程)Javascript 中调用以下代码:

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)

这篇关于如何在 Electron 中添加具有“检查元素"的右键菜单像Chrome这样的选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！