不多逼逼，直接上效果！

准备工作:
一个能运行的 Electron 项目，我的版本是 7.0.0

实现方法1

webContents > inspectElement( x , y )
在官方文档里找了很久！皇天不负有心人！

可是人家写着，进程：主进程。先按照这个思路写一下。
主进程：main.js

const { ipcMain } = require('electron');

//监听从渲染进程过来的命令
ipcMain.on('inspectElement', (e, x,y) => {
    //存在x,y都是0的情况，自行处理x,y;
    if (x && y) {
        e.sender.webContents.inspectElement(x, y);
        //等价
        //e.sender.inspectElement(x, y);
    }
});

渲染进程：index.html

<script>
    const { remote, ipcRenderer } = require('electron')
    const { Menu, MenuItem } = remote
    const menu = new Menu()

    let __mX, __mY; //记录鼠标右键位置

    menu.append(new MenuItem({ role: 'reload' }));
    menu.append(new MenuItem({ type: 'separator' }));
    menu.append(new MenuItem({
        label: '审查元素',
        click() {
            //向主进程发送要打开审查的命令
            ipcRenderer.send('inspectElement', __mX, __mY);
        }
    }))

    window.addEventListener('contextmenu', (e) => {
        //记录鼠标右键位置
        __mX = e.pageX;
        __mY = e.pageY;

        e.preventDefault()
        menu.popup({ window: remote.getCurrentWindow() })
    }, false)
</script>

实现方法2

直接在渲染线程 index.html

<script>
  const { remote } = require('electron')
  const { Menu, MenuItem } = remote
  const menu = new Menu()

  //记录鼠标位置
  let __mX,__mY;

  //准备菜单
  menu.append(new MenuItem({role:'reload'}));      //重载
  menu.append(new MenuItem({type:'separator'}));   //分割线
  menu.append(new MenuItem({                       //审查元素
    label: '审查元素', 
    click() { 
      let win = remote.getCurrentWindow();
      
      //win.openDevTools(); 可有可无
      //inspectElement 会判断是否打开了开发者工具，并自动打开
      //在页面的位置（x，y）开始检查元素。
      win.inspectElement(__mX,__mY); 

      //等价
      //win.webContents.inspectElement(__mX,__mY); 
    }
  }))

  window.addEventListener('contextmenu', (e) => {
    //记录鼠标右键位置
    __mX = e.pageX;
    __mY = e.pageY;
    //以下代码来自官网
    e.preventDefault()
    menu.popup({ window: remote.getCurrentWindow() })
  }, false)
</script>