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?

Tanner Semerad · Accepted Answer · 2016-03-29T17:46:29.843

69

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)

edited Mar 29 '16 at 17:46

answered Sep 17 '15 at 17:46

Tanner Semerad

12,472
12
40
49

10

In case someone could find it useful, I created a repo on github based on your answer. You can find it here: [debug-menu](https://github.com/parro-it/debug-menu) – Andrea Parodi Nov 12 '15 at 07:06
2

In the latest version of electron (0.36.11) I had to call `remote.getCurrentWindow()` inside the event handler for this to work, rather than caching in the currentWindow constant. – enjalot Mar 25 '16 at 18:05
5

If you are using typings the `inspectElement` does not exist on `BrowserWindow`. You could do `remote.getCurrentWindow().webContents.inspectElement` instead. – Mats Aug 05 '16 at 12:12
4

The import statements have changed; also there is now an [example in the docs](http://electron.atom.io/docs/api/menu/#render-process) – chris Oct 26 '16 at 17:59

score 18 · Answer 2 · edited Mar 16 '19 at 19:03

18

Try electron-context-menu. It adds inspect element, copy and paste.

edited Mar 16 '19 at 19:03

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

answered Sep 29 '16 at 10:29

Oded Breiner

28,523
10
105
71

That works great for Forge as well.! I'd like to point out though that this feature does not belong to a native app, so it should somehow be dropped for production – Stamatis Deliyannis May 07 '21 at 22:16
The context menu made by this package cannot be changed depending on where you click. – golopot Jan 01 '22 at 09:58

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

2 Answers2

Linked