The preface

Do front-end development friends often need to use Visual Studio Code to edit the Code, many friends want to debug JS Code in VSCode, we will introduce how to configure the operation.

First, environmental preparation

First, install VSCode, prepare a JS project, and install the plugin Debugger for Chrome in VSCode (as shown below).

2. Modify the configuration file

1. Use VSCode to open the project

If you can’t test the project, you can use tools such as HBuilder to create a New Web project for testing, as follows:

Then, use VSCode to open the above project as follows:

2. Set a breakpoint

Press F5 and select Chrome from the drop-down list.

Then open the launch.json configuration file as follows:

Add the following inside configurations:

1. ` {` 2. ` "name" : "" to use the machine Chrome debugging, ` 3. `" type ":" Chrome ", ` 4. ` "request" : "launch", ` 5. ` "file" : "${workspaceRoot}/index.html",` 6. `// "url": "Http://mysite.com/index.html", / / to use external server, please comment out the file, use the url, And will useBuildInServer set to false http://mysite.com/index.html ` 7. ` runtimeExecutable ": "C:\ Program Files (x86)\\Google\ Chrome\ Application\ chrome.exe", // change your Chrome installation path to '8.' "sourceMaps": true,` 9. `"webRoot": "${workspaceRoot}",` 10. `// "preLaunchTask":"build",` 11. `"userDataDir":"${tmpdir}",` 12. `"port":5433` 13. `}`Copy the code

After being added, the content is as follows:

3. Change the debugging mode

4. The debugging

As shown below, you can control breakpoint execution by pressing F5, clicking the corresponding button or pressing the response shortcut key.

The last

If you have any questions, feel free to leave them in the comments section.