Use VSCode breakpoint debugging

1. The purpose of the effect 1. In VSCode, directly F5 to open the html page, and you can debug the js code with breakpoints in the editor;

2. Tool preparation
1. VSCode software
2. A js project
3. VSCode installs a plug-in: Debugger for Chrome
as shown in the figure

Three, configuration file changes
1. Load the project with VSCode

2. Then press F5, this box appears

Choose Chrome

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

Add a piece of configuration information to this file

 

       {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }

The result is shown in the figure

4. Then, change the debugging method

As shown in the figure, select the round button on the left, and then come out this debugging configuration management interface, select "Use native Chrome debugging".

5. Then set a breakpoint in the js of the project, press F5, and then you can debug the breakpoint.

6. Then enjoy!

PS: This method is only suitable for ordinary pages. If your js project contains json and other resources that the browser does not support local browsing, then you need to open the server and cooperate with this plug-in to debug breakpoints.