@soleng-fuze/electron-debug NPM

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.

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