Tips and Tricks for Debugging Electron Applications
Tips and Tricks for Debugging an Electron Application is an excerpt from Electron in Action, a step-by-step guide to building desktop applications that run on Windows, OSX, and Linux.
If you’d like to follow along with the techniques demonstrated in this article, you can use the electron-quick-start demo to create a minimal Electron application:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
If you’d like a refresher on Electron, then check out our tutorial: Create Cross-Platform Desktop Node Apps with Electron.
Imagine you have a new, shiny Electron app. Everything is going smoothly for you, but it probably won’t be long before you need to debug some tricky situation. Being that Electron applications are based on Chrome, it’s no surprise that we’ve access to the Chrome Developer Tools when building Electron applications.
Debugging Renderer Processes
Figure 1: The Chrome Developer Tools are available to us in the renderer process like they’d be in a browser-based application.
Debugging the renderer process is relatively straight-forward. Electron’s default application menu provides a command for opening the Chrome Developer Tools in our application. You can create your own custom menu and eliminate this feature in the event that you’d prefer not to expose it your users.
Figure 2: Figure 2 The tools can be toggled on and off in the default menu provided by Electron.
Developer Tools can be accessed in two other ways. At any point, you can press Cmd + Opt + I on macOS or Ctrl + Shift + I on Windows or Linux. In addition, you can also trigger the Developer Tools programmatically.
The webContents property on BrowserWindow instances has a method called openDevTools(). This method, as you might as expect, opens the Developer Tools in the BrowserWindow it’s called on.
app.on('ready', () => {
mainWindow = new BrowserWindow();
mainWindow.loadURL(`file://${__dirname}/index.html`);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
});
We can programmatically trigger the opening of the Developer Tools on the main window once it loads.
Continue reading %Tips and Tricks for Debugging Electron Applications%
LEAVE A REPLY
You must be logged in to post a comment.