vscode javascript 调试

安装好node.js，配置好路径

• nodejs项目

    很是方便，详见网上教程

 

• 网页项目

    装一个插件：Debugger for Chrome 

    用VSCode打开文件夹

2.而后按F5，出现这个框 

选择 Chrome，只有node.js

3.而后出现个配置的提示，和打开了launch.json这个文件 

-项目

         -.vscode

                   -launch.json

 {
 "name": "使用本机 chrome 调试",
 "type": "chrome",
 "request": "launch",
 "file": "${workspaceRoot}/tb-comments.htm",
 "url": "http://localhost/tb-comments.htm", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
 "runtimeExecutable": "C:/Users/Administrator/Downloads/Chrome/chrome.exe", // 改为您的 Chrome 安装路径
 // "sourceMaps": true,
 "webRoot": "${workspaceRoot}",
 // "preLaunchTask":"build",
 // "userDataDir":"${tmpdir}",
 "port":5433
 }

 

4.转到要调试的html

更改调试方式

 

而后点绿色

 

5.设置好断点，按 F5，就能够进行断点调试了。 
 

要是不支持本地游览的资源，那么就须要开启服务器，才能进行断点调试。

 

在服务器里调试

launch.json里添加

 ,{
 "name": "web调试",
 "type": "chrome",
 "request": "launch",
 // "file": "${workspaceRoot}/tb-comments.htm",
 "url": "http://localhost:88/tb-comments.htm", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
 "runtimeExecutable": "C:/Users/Administrator/Downloads/Chrome/chrome.exe", // 改为您的 Chrome 安装路径
 // "sourceMaps": true,
 "webRoot": "${workspaceRoot}",
 // "preLaunchTask":"build",
 // "userDataDir":"${tmpdir}",
 "port":5433
 }

 

2、Html文件中不能打断点问题

      默认状况下，VSCode是不能在Html文件里打断点的，可是能够修改设置，依次打开：文件->首选项->设置，而后功能->调试->勾选上“容许在任何文件中设置断点”。

 

另外还有个状况，若是开了两个VSCode，不能同时运行调试