@soleng-fuze/electron-debug

electron-debug

Adds useful debug features to your Electron app

Ideas for more debug features welcome!

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

Usage

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

require('electron-debug')({showDevTools: true});

let win;

app.on('ready', () => {
	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

enabled

Type: boolean

showDevTools

Type: boolean string
Default: false
Values: 'right' 'bottom' 'undocked' false true (Last dock state)

Show DevTools on each created BrowserWindow.

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], [showDevTools])

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

window

Type: BrowserWindow
Default: The focused BrowserWindow

showDevTools

Type: boolean string
Default: false
Values: 'right' 'bottom' 'undocked' false true (last dock state)

Show DevTools on each created BrowserWindow.

Related

• 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-is-dev - Check if Electron is running in development
• debug-menu - Chrome-like debug context-menu for Electron

License

MIT © Sindre Sorhus