When I first got into Electron and tried to debug the program, I didn’t know what to do, so I recorded the process

Refer to the project

According to the official documentation of Electron: use VSCode adjustment of the main process: https://electronjs.org/docs/tutorial/debugging-main-process-vscode

Download the corresponding lot engineering: github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

Import the project with VSCode

1: VSCode installation

2: import the above project from the add folder to workspace menu of VSCode

Click on the debug selection arrow icon in the lower left corner to see the following two options:

Debug Main Process

Debug Renderer Process

These two selections correspond to the.vscode\launch.json content in the project folder, as shown below

VScode debugs the main process

If you select Debug Main Process, you can stop your code at the breakpoint set in main.js.

VScode debugs the renderer

Use the Debug Renderer Process shown above, as shown in render.js below. When you click on the interface displayed by the application, the click event will be triggered and the code will stop at the set breakpoint.


In the above project, it was ok to debug the renderer using VSCode, but after trying to package the code with webpack, I found that the breakpoint set in the code would not stop, so here is another way to debug the renderer

DevTool debugs the rendering process

Find another way to debug the render process in Electron’s official documentation:

Debugging application: https://electronjs.org/docs/tutorial/application-debugging note: this method can only debug the rendering process

In the main process code main.js:

function createWindow () {

  // Create the browser window.

  mainWindow = new BrowserWindow({width: 800.height: 600})

  // and load the index.html of the app.

  mainWindow.loadURL(`file://${__dirname}/index.html`)

Copy the code

Increase the mainWindow. WebContents. OpenDevTools ();

As follows:

 function createWindow () {

  // Create the browser window.

  mainWindow = new BrowserWindow({width: 800.height: 600})

  mainWindow.webContents.openDevTools();

  // and load the index.html of the app.

  mainWindow.loadURL(`file://${__dirname}/index.html`)

Copy the code

No matter you are using the debugging mode, or using the task mode, as long as the program is running, you can open the Developer Tools debugging window on the right of your program running interface by default, just like the F12 debugging window of the browser. You’ll find that even with Webpack, you can stop at breakpoints normally during debugging.

VScode debugging problems encountered

When using the electron/electron-quick-start on the electron Github front page, it is not possible to debug the main or render process using VScode, even if the “protocol”: “legacy” is changed to “protocol” as prompted: The “inspector” also fails to solve the problem. It is later discovered that the project uses “electron”: “^1.8.4” instead of “electron”: “1.5.1”, and the different electron version is used to reference the nodeJS version. The printed logs are as follows:

We are using Node.js 82.1..Chromium 59. 03071.115..and Electron 18.4..

Copy the code

and

We are using node 74.. 0.Chromium 54. 02840.101..and Electron 1. 51..

Copy the code

Initial suspicion was that it had something to do with it.

If you have any solution, please leave a message for me, thank you!