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!
|