|
http:///2018/05/19/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%94%A8Vscode%20Debugger%E8%B0%83%E8%AF%95%E4%BB%A3%E7%A0%81/#Debugger-For-Chrome
手把手教你用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)编写的网页调试也是非常方便的，方法也都差不多，这里不一一举例了，有兴趣的童鞋可以自行尝试😁
总结
上面就是总结了，这里没啥写了，附上参考文档的链接吧
Debugger For Chrome
参考视频
文章作者: Rao Jinwei
文章链接: http:///2018/05/19/手把手教你用Vscode Debugger调试代码/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明来自 Rao Jinwei's Blog！
|
