electron-debug

electron-debug

Adds useful debug features to your Electron app

Features

DevTools

Toggle DevTools.

• macOS: Cmd Alt I or F12
• Linux: Ctrl Shift I or F12
• Windows: Ctrl Shift I or F12

Reload

Force reload the window.

• macOS: Cmd R or F5
• Linux: Ctrl R or F5
• Windows: Ctrl R or F5

Element Inspector

Open DevTools and focus the Element Inspector tool.

• macOS: Cmd Shift C
• Linux: Ctrl Shift C
• Windows: Ctrl Shift C

Activates DevTools extensions

Just install any of these extension and they'll be activated for you:

• devtron - The official Electron DevTools extension
• electron-react-devtools - React DevTools extension for Electron

Install

$ npm install electron-debug

Requires Electron 2.0.0 or later.

Usage

const {app, BrowserWindow} = require('electron');
const debug = require('electron-debug');

debug();

let win;
(async () => {
	await app.whenReady();
	win = new BrowserWindow();
})();

API

Only runs when in development, unless overridden by the enabled option. So no need to guard it for production.

electronDebug([options])

Install keyboard shortcuts and optionally activate DevTools on each created BrowserWindow.

options

Type: Object

enabled

Type: boolean

showDevTools

Type: boolean
Default: true

Show DevTools on each created BrowserWindow.

devToolsMode

Type: string
Default: undocked
Values: undocked right bottom previous detach

The dock state to open DevTools in.

devTools([window])

Toggle DevTools for the specified BrowserWindow instance or the focused one.

window

Type: BrowserWindow
Default: The focused BrowserWindow

refresh([window])

Reload the specified BrowserWindow instance or the focused one.

window

Type: BrowserWindow
Default: The focused BrowserWindow

openDevTools([window])

Open DevTools for the specified BrowserWindow instance or the focused one.

window

Type: BrowserWindow
Default: The focused BrowserWindow

Related

• electron-util - Useful utilities for developing Electron apps and modules
• electron-store - Save and load data like user preferences, app state, cache, etc
• electron-context-menu - Context menu for your Electron app
• electron-dl - Simplified file downloads for your Electron app
• electron-unhandled - Catch unhandled errors and promise rejections in your Electron app
• electron-reloader - Simple auto-reloading for Electron apps during development
• electron-serve - Static file serving for Electron apps
• debug-menu - Chrome-like debug context-menu for Electron

License

MIT © Sindre Sorhus