electron

Electron - Main Process (desktop/main-app)

To facilitate debugging, we set the reserved Debug configuration with: --enable-logging and --inspect=5859

• --enable-logging: This option will be passed to Electron, which will then print its own debug logs to the current console
• --inspect=5859: If you prefer to use Chrome DevTools for debugging, then you can listen to this port at chrome://inspect for debugging

WebStorm

We've set up the Debug Main Configurations in WebStorm for you, and you can use it directly to do the Debug

Note that you should select the Debug button, not the Run button, as shown in the image below:

vscode

We also set aside configured Debug Main configurations for vscode, which you can do in the Debug sidebar of vscode.

As shown in the picture:

Additional Notes

--enable-logging param

The version of Electron we are currently using does not support setting the output location of logs, as this feature was not supported until Electron v14.0.0, for which see: electron/electron#25089

In the future, when Flat upgrades Electron to 14.0.0 or higher, we will support

--inspect=5859 param

If you want to use Chrome DevTools for debugging, you can refer to the following procedure:

First you have to make sure you have started Debug and also set a breakpoint before starting it.

When Debug starts, Node.js will listen to port 5859. In this case, open: chrome://inspect in the Chrome address bar, like this

Click: Open dedicated DevTools for Node, a DevTools window will appear

Your page may not match mine at this point, please don't worry. Click Add connection, enter: localhost:5859 in the input box, then click Add and you are ready to debug. It looks like the following:

Watch inconsistency issues

We often need to use the Watch function during debugging, but it should be noted that what you Watch The variable may not exist. Because the code executed by Debug is compiled, it is possible that variable names will be overwritten.

But the good news is that it has been found that such variable overrides only affect: import statements such as :

• import runtime from "./Runtime" => Runtime_1
• import { app } from "electron"" => electron_1

A screenshot can describe the problem more clearly:

This problem is caused by the compilation of tsc', at present, there is no better way to solve it. We can only pay attention to it during operation.

This is true even if you use ts-node as a runtime. Because ts-node is essentially a dynamic way to do tsc as well.