How to add a right-click menu in Electron that has "Inspect Element" option like Chrome?

Question

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?

Answer 1

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

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)