使用vscode调试js

老是重装系统，老是换员工。不得不出个笔记

检查你使用的vscode的版本是否是比较新的，我使用的是最新版本，如果不是最新版本需要在help—–>check for updates一下

1.安装Debugger for Chrome插件

3.在本地创建一个目录，用来存放项目的静态文件，我这里创建的是E:\demo（这里有一个坑，如果没有创建项目的目录没办法调试）

4.使用vscode打开这个目录，并创建静态文件，我这里随便创建两个，index.html index.js ,index.html文件中引入js文件

5.配置debug方式，点击小齿轮，能自动打开launch.json配置文件，说明你的调试插件安装成功

6.配置调试配置文件，默认配置文件为如下内容

需要在后面添加如下配置信息，根据自己的实际情况配置相应的路径，下面是我的项目配置

,

{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"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
}

最终额配置结果：

7.经过如上配置完毕后，你会发现你的调试菜单里面多了一个“使用本机chrom调试”选项

8.开始打断点调试

选择使用本机Chrome调试选项，并点击左边的绿色小按钮，此时会自动打开浏览器和调试界面，此时你可以调试你的js了

总结：

如上的方式使用的是静态方式调试，没有使用http服务器，你可以看到，最后一步中打开的浏览器地址栏上的地址是真是的静态文件地址，另外，js调试能在一定程度上解决了程序员调试js的难题，当然js的调试途径不仅仅是vscode，使用chrom自带的浏览器，以及webstorm ide工具，需要学习的可以自己网上查资料学习。
————————————————