手把手教你用Vscode Debugger调试代码
2018-05-19|工具
前言
一直觉得Vscode是前端开发最友好的IDE，里面内置的功能非常好用，无论是其拥有丰富的插件拓展，还是git的集成，都是提高效率的好帮手。Vscode还隐藏了一个据说非常强大的debugger模块，今天经过我一番尝试，发现十分有用，接下来，我就总结下如何使用Debugger模块进行代码调试。
你想在哪调试？????
首先，这个标题起得确实有点那个，在哪调试？当然是在Vscode里面啊????不过，这个“哪”，其实问的是环境。什么环境？就目前大前端来说，环境不过于分为浏览器(Chrome)和Node了。Chrome和Node虽然都能跑js，但是具体的环境是视它们版本而定的，所以，不能有我在Chrome下跑的js正常，在Node就一定正常这种说法，具体要看它们用的V8是不是同一版本的。
好了，不唠叨了，vscode的debugger环境是分为Chrome和Node的。接下来，我先讲讲如何在Chrome环境下，使用vscode debugger进行代码调试。
Debugger For Chrome
Vscode里面是没有内置调试Chrome的模块的，需要单独安装。
第一步，先安装插件Debugger For Chrome
第二步，任意目录下创建一个名debug文件夹，接着在里面分别创建index.html，index.js文件.
第三步，配置这个插件，让它跑起来：
首先，先打开vscode调试区域，然后点设置
然后，选Chrome
进入了launch.json文件
把配置改成
|
1 2 3 4 5 6 7 8 9 10 11 |
"version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch index.html", "sourceMaps": true, "file": "${workspaceRoot}/index.html" }, ] } |
最后，切成Launch index.html，再点绿色icon或者在index.html目录下直接按F5就跑起来啦
快看看你的chrome是不是自动启动了！
如果启动了，ok，接着在index.html下引入index.js，在index.js里面随便写点js，然后重新启动
看，console.log()不是在vscode里面显示出来啦
断点调试
我们试试在vscode里面加断点，单步调试
OK，完全没问题，感觉是不是很方便，调试js只需要在IDE中完成，不用再切换到浏览器中了！
有点高级的用法(加Attach)
抛出一个问题，加Attach有什么用？
我在平常开发中，是结合live-server(vscode插件)进行开发的，live-server非常强大好用，它会监听你文件改动进行自动刷新浏览器，无须手动去刷新。这里Attach的作用就是去附加在我用live-server启动的开发的服务器上，去监听我那里的chrome debugger，通俗来讲，就是让vscode的调试控制台上可以完整得显示出debugger信息。
举个栗子吧，我用live-server开了个http://localhost:5500的服务，里面有很多console.log和debugger信息，如果我不加Attach，只能在chrome的F12调出devtools看信息和动态打断点调试。有了Attach，调试js时，我就不用老是盯着浏览器的devtools去看了，也不用去找文件打断点了，直接在vscode里面完成所有调试，真爽????
如何配置使用？
首先用live-server打开index.html，你会发现浏览器自动跳转到http://localhost:5500上了。好，接着到launch.json进行配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceFolder}" }, { "type": "chrome", "request": "launch", "name": "启动 Chrome 并打开 localhost", "url": "http://localhost:5500", "webRoot": "${workspaceFolder}" }, |
配到这里，如果你直接试着直接去开启，发现是不行的，我刚开始尝试时掉进这个坑里，后来，在官方配置文档里找到了答案，需要对Chrome浏览器启动项进行配置
关掉你现在的chrome，在去vscode调试面板上，换成Attach to Chrome，在启动，就可以了~????
那么，让所有关于js调试都在Vscode里面搞定吧！
调试Node.js
Vscode内置Node的调试环境，就不需要安装插件了，先创个名为node.js的文件，然后在launch.json里添加配置
|
1 2 3 4 5 6 |
{ "type": "node", "request": "launch", "name": "Launch Node", "program": "${workspaceFolder}/node.js" } |
配置完成后，在调试面板上，启动选项切换成Launch Node，然后启动就可以了，断点调试什么都是没问题的。
Tips：
我觉得如果是学习JavaScript的话，写demo配合Vscode里的Node的调试环境是不错的选择。
用Vscode的Debugger对用框架(react,vue,ng)编写的网页调试也是非常方便的，方法也都差不多，这里不一一举例了，有兴趣的童鞋可以自行尝试????
总结
上面就是总结了，这里没啥写了，附上参考文档的链接吧
文章作者: Rao Jinwei
文章链接: http://shooterblog.site/2018/05/19/手把手教你用Vscode Debugger调试代码/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明来自 Rao Jinwei's Blog！