Shulou(Shulou.com)05/31 Report--

This article mainly analyzes the relevant knowledge points of how to debug the main process code of Electron application in VSCode, the content is detailed and easy to understand, the operation details are reasonable, and has a certain reference value. If you are interested, you might as well follow the editor to take a look, and follow the editor to learn more about "how to debug the main process code of Electron applications in VSCode".

When developing Electron applications, in order to improve work efficiency, we need to find and solve problems in time with the help of debugging tools.

VSCode as the most popular code editor, most of my code is developed on it, and Electron applications are no exception.

Build an environment

The project used below is electron-quick-start (https://github.com/electron/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.

Debug configuration

To open it using VSCode, do the following:

Generate the lauch.json file for the following configuration:

{/ / use IntelliSense to learn about the relevant properties. / / hover to see a description of an existing property. / / for more information Please visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [{"type": "pwa-node", "request": "launch", "name": "Launch Program", "skipFiles": ["/ *"] "program": "${workspaceFolder} / main.js"]}

We modify the configuration as follows:

{"version": "0.2.0", "configurations": [{"name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder} / node_modules/.bin/electron" "windows": {"runtimeExecutable": "${workspaceFolder} / node_modules/.bin/electron.cmd"}, "args": [. / main.js ", / / main file path]}]} start debugging

After we have finished the above environment building and file configuration, we can have a pleasant debugging.

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.

This is the end of the introduction on "how to debug the main process code of Electron applications in VSCode". More related content can be searched for previous articles, hoping to help you answer questions and questions, please support the website!

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.