debug-menu

Chrome-like "inspect element" context-menu for Electron

This module was extracted from electron-debug to keep it focused on its main features.

Context menu items

Inspect element

Inspect the clicked HTML element. It shows DevTools if it's not already opened.

Install

$ npm install --save-dev debug-menu

Usage

When you use this module in renderer process code, BrowserWindow instance need to be opened with node integration enabled.

We usually load this module only if the DEBUG environment variable is defined, to avoid end users of the app inadvertently opening DevTools.

const debugMenu = require('debug-menu');
debugMenu.install();  // activate context menu

// later, if needed
debugMenu.uninstall();  // deactivate context menu

API

debugMenu.install()

Activate context menu. This method add a listener on window DOM object contextmenu event.

debugMenu.uninstall()

Deactivate context menu. This method remove the listener on window object.

debugMenu.windowDebugMenu(win);

The debug Menu object template. You can use it to integrate with your own app context or BrowserWindow menu.

options

win

BrowserWindow instance to use for this Menu.

Type: BrowserWindow
Default: the currently focused BrowserWindow.

Example

  // ... require electorn module

  const debugMenu = require('debug-menu');
  const win = new BrowserWindow();

  const menu = Menu.buildFromTemplate([{
    label: 'Debug',
    submenu: debugMenu.windowDebugMenu(win)
  }]);

  if (process.platform !== 'darwin') {
    win.setMenu(menu);
  } else {
    electron.Menu.setApplicationMenu(menu);
  }

  // ... show window

License

The MIT License (MIT)

Copyright (c) 2016 Andrea Parodi