手把手教你用Vscode Debugger调试代码

http://shooterblog.site/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

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文件

把配置改成

"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进行配置

{

"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里添加配置

步骤

{

"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://shooterblog.site/2018/05/19/手把手教你用Vscode Debugger调试代码/