Tips and Tricks for Debugging Electron Applications

Electron Application Debugging Guide: Efficiently utilize Chrome Developer Tools and VS Code

This article introduces how to efficiently debug Electron applications, covering the debugging methods of the rendering process and the main process.

Core points

• Electron apps can be debugged directly using Chrome developer tools. It can be accessed through the App menu, shortcut keys, or BrowserWindow.openDevTools() method.
• Main process debugging is relatively complex, and Node Inspector supports are limited. VS Code is recommended, which provides a rich Node application debugging tool.
• VS Code supports custom build tasks and debug configurations, allowing setting breakpoints, checking call stacks, viewing variables, and using a real-time console, making it easier to debug and troubleshoot errors.

Rendering process debugging

Figure 1: Chrome developer tools are used in the rendering process the same as browser applications.

The default menu of the Electron app provides commands to open Chrome Developer Tools. You can also customize the menu and remove this feature.

Figure 2: Developer tools can be switched in the default menu of Electron.

In addition, you can use the Cmd Opt I on macOS or the Ctrl Shift I shortcut keys on Windows/Linux, or programmatically open the developer tools through the BrowserWindow method of the webContents.openDevTools() instance.

app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

Code example: Open the developer tool programmatically after the main window is loaded.

Main process debugging

Main process debugging is difficult, and Node Inspector supports are limited. Although the Electron app can be started with the --debug parameter to enable remote debugging (default port 5858), the support for Node Inspector in the official documentation is not fully improved.

Debug the main process using VS Code

VS Code is a free and open source IDE that is also built on Electron. It provides a powerful Node application debugging tool, which is very suitable for debugging Electron applications.

Quickly set up build tasks: Press Ctrl Shift B on Windows, press Cmd Shift B on macOS, and VS Code will prompt you to create a build task (as shown in Figure 3).

Figure 3: If there is no build task, triggering the build task will prompt creation.

You can also press Ctrl Shift P (Windows) or Cmd Shift P (macOS), enter "Task", and select "Select Tasks: Configure Task Runner", which will be created under the .vscode folder A tasks.json file and open it.

The method of setting up build and debugging tasks on each platform is similar, but the name of the prebuilt binary files generated on different operating systems is different: electron-prebuilt on Windows, electron.exe on macOS, Electron.app on Linux. electron

• Set up build tasks in VS Code (tasks.json)

app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

Please replace

with the corresponding name of your system. <name-of-binary></name-of-binary>

Now, when you press

on Windows/Linux or Ctrl Shift B on macOS, your Electron app will start. This is not only crucial for setting up debugging in VS Code, but it is also a convenient way to start an application. The next step is to set up VS Code to launch the app and connect to its built-in debugger. Cmd Shift B

Connect to the debugger

Figure 4: In the debug panel, click the gear icon and VS Code will create a configuration file for you to start the debugger.

To create a startup task, go to the Debug tab in the left panel and click the pinion (Figure 4). VS Code will ask you which type of configuration file you want to create. Select "Node.js" and replace the file contents with the following example configuration.

{
  "version": "0.1.0",
  "command": "node_modules/electron-prebuilt/dist/<name-of-binary>",
  "args": ["lib/main.js"]
}

Please replace

with the corresponding name of your system. <name-of-binary></name-of-binary>

You can read more about startup configuration here.

With these two configuration files, you can click on the margin to the left of any row to set a breakpoint, and press

to run the application. Execution pauses at breakpoints, allowing you to check the call stack, view variables within scope, and interact with the real-time console. Breakpoints are not the only way to debug your code. You can also monitor specific expressions, or go into the debugger when an uncaught exception is thrown. F5

Figure 5: VS Code's built-in debugger allows you to pause application execution and investigate errors in depth.

Summary

Master these debugging techniques so you can develop and maintain Electron applications more efficiently.

(The FAQs part has been omitted because the original FAQs and the main text are duplicated and the length is long. In order to avoid redundancy, only the introduction of the core debugging methods is retained here.)

The above is the detailed content of Tips and Tricks for Debugging Electron Applications. For more information, please follow other related articles on the PHP Chinese website!