Awesome
electron-debug
Adds useful debug features to your Electron app
Features
DevTools
Toggle DevTools.
- macOS: <kbd>Cmd</kbd> <kbd>Alt</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
- Linux: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
- Windows: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
Reload
Force reload the window.
- macOS: <kbd>Cmd</kbd> <kbd>R</kbd> or <kbd>F5</kbd>
- Linux: <kbd>Ctrl</kbd> <kbd>R</kbd> or <kbd>F5</kbd>
- Windows: <kbd>Ctrl</kbd> <kbd>R</kbd> or <kbd>F5</kbd>
Element Inspector
Open DevTools and focus the Element Inspector tool.
- macOS: <kbd>Cmd</kbd> <kbd>Shift</kbd> <kbd>C</kbd>
- Linux: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>C</kbd>
- Windows: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>C</kbd>
Install
npm install electron-debug
Requires Electron 30 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.
electronDebug(options?)
Install keyboard shortcuts and optionally activate DevTools on each created BrowserWindow
.
options
Type: object
isEnabled
Type: boolean
showDevTools
Type: boolean
Default: true
Show DevTools on each created BrowserWindow
.
devToolsMode
Type: string
Default: 'previous'
Values: 'undocked'
'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