Shulou(Shulou.com)06/01 Report--

This article will explain in detail the steps of using VSCode to debug the main process of Electron. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Build an environment

The project used in this article is electron-quick-start.

$git clone https://github.com/electron/electron-quick-start$ cd. / electron-quick-start$ npm install

After the above steps, the basic Electron application development environment is built. View package.json:

{"name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": {"start": "electron."}, "repository": "https://github.com/electron/electron-quick-start"," keywords ": [" Electron "," quick "," start "," tutorial " "demo"], "author": "GitHub", "license": "CC0-1.0"," devDependencies ": {" electron ":" 16.0.6 "}}

We can run npm run start on the terminal to view the running result:

As you can see, the construction of the environment has been completed! Next, let's move on to the development and debugging process.

Document

The official website explains how to debug the main process with VSCode.

Click the debug button in vscode, or press F5

He will prompt you to configure and generate a lauch.json file, as shown in the following figure

Or just create a new one.

Create a new .vscode folder under the current project

Create a new launch.json file in this .vscode

Enter the following in the launch.json file

Enter the following in lauch.json

{"version": "0.2.0", "configurations": [{"name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "runtimeExecutable": "${workspaceRoot} / node_modules/.bin/electron" "windows": {"runtimeExecutable": "${workspaceRoot} / node_modules/.bin/electron.cmd"}, "args": ["."], "outputCapture": "std"}]} debugging

Break the point in the main program main.js, and then press F5 to debug, as shown in the following figure

Rendering proc

Needless to say. Break the point directly in the console of chrome ~

What is the use of vscode Visual Studio Code is a cross-platform editor for writing modern web and cloud applications, which runs on OS X web Windows and Linux. It provides developers with built-in support for a variety of programming languages, and as Microsoft pointed out in keynote at the Build conference, this editor also provides rich code completion and navigation features for these languages.

On the use of VSCode debugging Electron main process steps are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.