When we develop applications with Electron.js, we are essentially building a desktop application using web technologies (HTML, CSS, and JavaScript). Just like in traditional web development, one of the most powerful tools at our disposal is the browser's Developer Tools (DevTools). Electron, being based on Chromium, allows us to use the same Google Chrome DevTools to debug our applications.
Previously, we saw how we can use plugins like Inter-process communication in Electron.js.
Activating DevTools
Activating DevTools in Electron is a simple process. It is done in the main process (usually the main.js or index.js file), right after creating the application window with BrowserWindow.
The key method is win.webContents.openDevTools(), where win is the BrowserWindow instance.
// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile('index.html');
// Open DevTools
win.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
And here is an example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<script>
console.log('This is a test from the rendering process.');
// We simulate an error
console.error('This is an example error.');
</script>
</body>
</html>When running the application, the window will open and, alongside it, the DevTools, showing any console message or error that occurs in the rendering process.
Best Practices: DevTools only in development
It is not good practice to show DevTools to end users in production. We can condition their opening to an environment variable, such as NODE_ENV.
// main.js
// ... (previous code)
function createWindow() {
// ... (window creation)
win.loadFile('index.html');
// Open DevTools only if we are in development mode
if (process.env.NODE_ENV === 'development') {
win.webContents.openDevTools();
}
}
// To run in development mode:
// NODE_ENV=development electron .
Keyboard shortcut to open/close DevTools
Another very useful option is to allow opening and closing DevTools with a keyboard shortcut, such as F12. This can be achieved by listening to the 'before-input-event' on webContents.
// main.js
// ...
function createWindow() {
const win = new BrowserWindow({
// ...
});
win.loadFile('index.html');
win.webContents.on('before-input-event', (event, input) => {
if (input.key === 'F12') {
win.webContents.toggleDevTools();
event.preventDefault();
}
});
}
// ...
What can we do with DevTools?
- Inspect Elements: Analyze and modify the DOM and CSS styles in real time.
- Console: View logs, errors, and execute JavaScript code in the page's context.
- Sources: Debug JavaScript code step-by-step, set breakpoints, and analyze the call stack.
- Network: Although in Electron we load local files, it is useful for debugging requests to external APIs.
- Application: Inspect local storage (LocalStorage, SessionStorage, etc.).
Conclusion
DevTools are an indispensable tool for developing and debugging Electron applications. They provide us with a deep insight into what is happening in the rendering process, allowing us to find and fix problems efficiently.
The next logical step in development with Electron is to understand how to enable Node.js integration in the rendering process to be able to use Node modules directly in our frontend files.