Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/parro-it/debug-menu
Chrome-like debugging context menu for electron.
https://github.com/parro-it/debug-menu
Last synced: about 2 hours ago
JSON representation
Chrome-like debugging context menu for electron.
- Host: GitHub
- URL: https://github.com/parro-it/debug-menu
- Owner: parro-it
- License: mit
- Created: 2015-11-07T21:07:05.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-10-28T09:33:53.000Z (about 2 years ago)
- Last Synced: 2024-10-11T23:19:47.446Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 137 KB
- Stars: 135
- Watchers: 3
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-electron - debug-menu - Chrome-like "inspect element" context-menu. (Tools / For Electron)
- awesome-electron - debug-menu - Chrome-like "inspect element" context-menu.  (Library / Debug)
- awesome-electron-zh - debug-menu - Chrome-like "inspect element" context-menu. (Tools / For Electron)
README
# debug-menu
[](https://greenkeeper.io/)
Chrome-like "inspect element" context-menu for [Electron](http://electron.atom.io)
> This module was extracted from [electron-debug](https://github.com/sindresorhus/electron-debug) to keep it focused on its main features.
[](http://travis-ci.org/parro-it/debug-menu)
[](https://npmjs.org/package/debug-menu)
[](https://npmjs.org/package/debug-menu)
# 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.
```js
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](https://github.com/parro-it/electron-contextmenu-middleware). See [related example](#middleware-example)
## debugMenu.uninstall()
Deactivate context menu. This method remove the listener on `window` object.
## debugMenu.windowDebugMenu(win);
The debug [Menu](http://electron.atom.io/docs/latest/api/menu/) object template. You can use it to integrate with your own app context or `BrowserWindow` menu.
### Arguments
* win
`BrowserWindow` instance to use for this Menu.
Type: `BrowserWindow`
Default: the currently focused `BrowserWindow`.
# Example
```js
// ... 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
```js
const debugMenu = require('debug-menu').middleware;
const context = require('electron-contextmenu-middleware');
context.use(debugMenu);
context.activate();
```
# Related projects
* [electron-contextmenu-middleware](https://github.com/parro-it/electron-contextmenu-middleware) - Build `electron` context menus composing multiple middlewares functions.
* [electron-input-menu](https://github.com/parro-it/electron-input-menu) - Context menu for [electron](https://github.com/atom/electron) input elements.
# License
The MIT License (MIT)
Copyright (c) 2016 Andrea Parodi