Electron应用Inspect Element点击无响应问题排查

当前代码调用元素检查功能的API写法不符合新版Electron规范：旧版Electron中inspectElement是BrowserWindow实例的原生方法，版本迭代后该方法已被迁移至webContents实例下，原有写法调用了不存在的方法，直接导致点击右键Inspect element选项无响应、使用快捷键唤起功能时报错。

打开项目内的menu.js文件，定位到setupDevelopmentEnvironment方法，将右键菜单点击回调中的this.mainWindow.inspectElement(x, y)修改为this.mainWindow.webContents.inspectElement(x, y)即可。
修改后的对应代码片段：

setupDevelopmentEnvironment() {
  this.mainWindow.openDevTools();
  this.mainWindow.webContents.on('context-menu', (e, props) => {
    const { x, y } = props;

    Menu.buildFromTemplate([
      {
        label: 'Inspect element',
        click: () => {
          this.mainWindow.webContents.inspectElement(x, y);
        }
      }
    ]).popup(this.mainWindow);
  });
}

修改完成后重启开发服务，右键检查元素功能和快捷键即可正常使用。

• 如果修改后功能仍未生效，先检查开发环境启动时的NODE_ENV变量是否正确设置为development：代码逻辑中只有满足NODE_ENV === 'development'或DEBUG_PROD === 'true'时，才会执行开发环境配置、绑定右键检查元素的菜单逻辑。
• 现有代码中Windows/Linux平台的View菜单下全屏选项存在笔误：Toggle &Full Screenn多了一个尾字母n，不影响元素检查功能，可顺手修正。

内容的提问来源于stack exchange，提问作者Abhishek kamal