The method of using vscode for breakpoint debugging

This article shares with you the methods of using vscode for breakpoint debugging. The editor thought it was very practical, so I shared it with you as a reference. Let's follow the editor and have a look.

Objective:

In VSCode, F5 opens the html page directly, and you can debug js code at breakpoints in the editor.

Preparatory work:

1. VSCode software

2. Js project

3. Install a plug-in on VSCode: Debugger for Chrome

Profile changes:

1. Load the project with VSCode

2. Then press F5, this box appears, and select Chrome

3. Then a configuration prompt appears and the file launch.json is opened

Add the following information:

{"name": "debugging with native Chrome", "type": "chrome", "request": "launch", "file": "${workspaceRoot} / index.html", / / "url": "http://mysite.com/index.html", / / when using an external server, please comment out file and use url instead And set useBuildInServer to false "http://mysite.com/index.html" runtimeExecutable: "C:\\ Program Files (x86)\\ Google\\ Chrome\\ Application\\ chrome.exe", / / change your Chrome installation path "sourceMaps": true, "webRoot": "${workspaceRoot}", / / "preLaunchTask": "build" "userDataDir": "${tmpdir}", "port": 5433}

The result is shown in the figure:

4. Change the debugging mode

As shown in the figure: select the circular button on the left, then come out of the debug configuration management interface, and select "debug with native Chrome".

Finally, set the breakpoint at the js of the project, press F5, and you can debug the breakpoint.

Thank you for reading! On the use of vscode breakpoint debugging methods to share here, I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, you can share it and let more people see it.