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

Known limitations

The shortcuts only work while the app window has focus. Electron does not deliver keyboard input to the DevTools web contents, so there is no way to detect the shortcut while DevTools itself has focus. Click the app window first, then use the shortcut.

Install

npm install electron-debug

Requires Electron 44 or later.

Usage

import {app, BrowserWindow} from 'electron';
import debug from 'electron-debug';

debug();

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

API

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

debug(options?)

Install keyboard shortcuts and optionally activate DevTools on each BrowserWindow, including the ones that already exist when this is called.

options

Type: object

isEnabled

Type: boolean
Default: Only in development

showDevTools

Type: boolean
Default: true

Show DevTools on each BrowserWindow.

devToolsMode

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

The dock state to open DevTools in.

windowSelector

Type: (window: BrowserWindow) => boolean | Partial<Options>
Default: () => true (Use the global options for every window)

Specify customized options for each window.

The given function receives the window to apply the filter or new options to.

It must return one of these values:

• true: To enable debug with the global options for the given window.
• false: Disable debug for the given window (same as returning {isEnabled: false}).
• Partial<Options>: Object to override global options just for the given window. It does a shallow merge.

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 settings, 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