不多逼逼，直接上效果毯盈！

準備工作:
一個能運行的 Electron 項目病袄，我的版本是 7.0.0

實現(xiàn)方法1

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

可是人家寫著，進程：主進程幅慌。先按照這個思路寫一下。
主進程：main.js

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

//監(jiān)聽從渲染進程過來的命令
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() {
            //向主進程發(fā)送要打開審查的命令
            ipcRenderer.send('inspectElement', __mX, __mY);
        }
    }))

    window.addEventListener('contextmenu', (e) => {
        //記錄鼠標右鍵位置
        __mX = e.pageX;
        __mY = e.pageY;

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

實現(xiàn)方法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 會判斷是否打開了開發(fā)者工具酸休，并自動打開
      //在頁面的位置（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>