Awesome

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.middleware

Expose a middleware context menu that can be mounted with electron-contextmenu-middleware. See related example

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.

Arguments

BrowserWindow instance to use for this Menu.

Type: BrowserWindow<br> Default: the currently focused BrowserWindow.

Example

  // ... require electron 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

Middleware example

  const debugMenu = require('debug-menu').middleware;
  const context = require('electron-contextmenu-middleware');

  context.use(debugMenu);

  context.activate();

Related projects

electron-contextmenu-middleware - Build electron context menus composing multiple middlewares functions.
electron-input-menu - Context menu for electron input elements.

License

The MIT License (MIT)