Javascript 有没有办法使用inspect element来选择Electron中的元素？

我希望利用Chromium的开发者工具中的“在页面中选择一个元素来检查它”

Ctrl+Shift+C

实用程序，允许用户在电子应用程序中选择一个元素

例如，应加载页面或文件。然后，在调用函数时，用户应该能够选择一个元素，就好像他们打开了开发工具并按下了inspect element按钮一样。单击一个元素来检查它，应该会导致使用检查的元素调用一个函数，而不会打开开发人员工具。这样做的目的是，这是一种内置的方式，可以选择页面上的元素，而无需重新编写代码来支持这种类型的点、高亮和单击选择系统

预期用途如下

const{app，BrowserWindow}=require（'electron'）；
app.on（'ready'，function（）{
let window=new BrowserWindow（）；
window.loadURL（'https://stackoverflow.com/');
//这将触发“检查元件”工具
window.getElementFromInspector（函数（元素）{
//使用“检查元素”工具选择元素后，应调用此命令
});
});

窗口不一定包含

.getElementFromInspector（回调：函数）

方法。但是，解决方案在功能上应该与建议的用法类似。（即使它需要将外部JavaScript加载到页面中，也只是尽可能避免）

通过查看Electron的API文档，我们了解了

contents.inspectElement（x，y）

方法。这听起来好像允许从页面上的x，y位置选择一个元素进行检查，但没有提到远程访问现在检查的元素。我还可以想象，如果还没有打开开发人员工具，那么这将导致打开开发人员工具，这是可以避免的

---

编辑：就我所见，我认为在不打开开发人员工具的情况下使用inspect元素选择器是不可能的。因此，要求开发人员工具打开的答案将被接受，但开发人员工具最好不需要打开。

好消息这是一个非常干净的解决方案。我完全理解您面临的具体问题

安装电子上下文菜单

如果您使用的是Npm（）

否则使用纱线

步骤1：学习上下文菜单的工作原理

// ./main.js
const {app, BrowserWindow} = require('electron');
const contextMenu = require('electron-context-menu');

// Add an item to the context menu that appears only when you click on an image
contextMenu({
    prepend: (params, browserWindow) => [{
        label: 'Rainbow',
        // Only show it when right-clicking images
        visible: params.mediaType === 'image'
    }]
});

// Your code that starts a new application
let win;
(async () => {
    await app.whenReady();
    win = new BrowserWindow();
})();

步骤2：使用自定义行为将项目添加到上下文菜单中

const contextMenu = require('electron-context-menu');

contextMenu({
    prepend: (params, browserWindow) => [
        {
            label: 'Destroy Atomic Bombs',
            click: (menuItem, browserWindow, event) => {
                // Note that the alert function is only avaialble in the renderer process
                //alert("You destroyed all the atomic bombs in the world, thanks :3")

                // If executed from the main process, the console log function will appear in the terminal, not in the developer tools
                console.log("You destroyed all the atomic bombs in the world, thanks :3")
            }
        }
    ]
});

此方法的详细学习-

---

我希望，它将帮助您：）愉快地编码。

这将以与inspect element实用程序相同的方式完成悬停时的inspect，但不会突出显示元素。它还要求开发人员工具能够正常工作

// main.js
const electron = require('electron');
const path = require('path');

electron.app.on('ready', function() {
  let window = new electron.BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'inspector.js')
    }
  });

  window.webContents.openDevTools();

  electron.ipcMain.addListener('mouse', function(event, e) {
    event.returnValue = null;
    window.webContents.inspectElement(e.x, e.y);
  });

  window.loadURL('https://stackoverflow.com/');
});

---

这并不是我想要的，也不是我想要的，但这是我能够最接近解决这个问题的方法。

据我所知，这将允许创建自定义上下文菜单项，例如更改为暗主题或其他页面/元素特定功能。但是，其目的更多的是在用户将鼠标悬停在元素上时高亮显示元素，直到他们单击鼠标左键进行选择。在元素着色中没有包含细节或颜色变化的框的情况下，沿着的线的内容。electron上下文菜单能够做到这一点吗？是的，我相信是这样，我无法找到使用electron上下文菜单激活检查元素“模式”的方法。我得到的最接近的结果是使用IPC和

contents.inspectElement

，但这只需要Electron本身就可以了。你对你说，但我不确定你的意思。堆栈交换从来没有，也很可能永远不会支持用户之间的直接消息传递。如果你能做到我所要求的，请编辑你的答案，以反映你所使用的方法，因为其他人看到这个问题可能会想知道如何做同样的事情，谢谢！好的，我知道了。您是否遵循github回购文件的规定。。有一个选项inspect elements，您可以在electron应用程序中单击鼠标右键添加inspect element

const contextMenu = require('electron-context-menu');

contextMenu({
    prepend: (params, browserWindow) => [
        {
            label: 'Destroy Atomic Bombs',
            click: (menuItem, browserWindow, event) => {
                // Note that the alert function is only avaialble in the renderer process
                //alert("You destroyed all the atomic bombs in the world, thanks :3")

                // If executed from the main process, the console log function will appear in the terminal, not in the developer tools
                console.log("You destroyed all the atomic bombs in the world, thanks :3")
            }
        }
    ]
});

// main.js
const electron = require('electron');
const path = require('path');

electron.app.on('ready', function() {
  let window = new electron.BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'inspector.js')
    }
  });

  window.webContents.openDevTools();

  electron.ipcMain.addListener('mouse', function(event, e) {
    event.returnValue = null;
    window.webContents.inspectElement(e.x, e.y);
  });

  window.loadURL('https://stackoverflow.com/');
});

// inspector.js
window.onload = function() {
  let {ipcRenderer} = require('electron');

  document.onmousemove = e => ipcRenderer.sendSync('mouse', { x: e.clientX, y: e.clientY });
};