2023年7月7日发(作者：)

⼿把⼿教你⽤VscodeDebugger调试代码⼿把⼿教你⽤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 ChromeVscode⾥⾯是没有内置调试Chrome的模块的，需要单独安装。第⼀步，先安装插件Debugger For Chrome第⼆步，任意⽬录下创建⼀个名debug⽂件夹，接着在⾥⾯分别创建，⽂件.第三步，配置这个插件，让它跑起来：⾸先，先打开vscode调试区域，然后点设置然后，选Chrome进⼊了⽂件把配置改成

11"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch ","sourceMaps": true,"file": "${workspaceRoot}/"},]}最后，切成Launch ，再点绿⾊icon或者在⽬录下直接按F5就跑起来啦快看看你的chrome是不是⾃动启动了！如果启动了，ok，接着在下引⼊，在⾥⾯随便写点js，然后重新启动看，()不是在vscode⾥⾯显⽰出来啦断点调试我们试试在vscode⾥⾯加断点，单步调试OK，完全没问题，感觉是不是很⽅便，调试js只需要在IDE中完成，不⽤再切换到浏览器中了！有点⾼级的⽤法(加Attach)抛出⼀个问题，加Attach有什么⽤？我在平常开发中，是结合live-server(vscode插件)进⾏开发的，live-server⾮常强⼤好⽤，它会监听你⽂件改动进⾏⾃动刷新浏览器，⽆须⼿动去刷新。这⾥Attach的作⽤就是去附加在我⽤live-server启动的开发的服务器上，去监听我那⾥的chrome debugger，通俗来讲，就是让vscode的调试控制台上可以完整得显⽰出debugger信息。举个栗⼦吧，我⽤live-server开了个localhost:5500的服务，⾥⾯有很多和debugger信息，如果我不加Attach，只能在chrome的F12调出devtools看信息和动态打断点调试。有了Attach，调试js时，我就不⽤⽼是盯着浏览器的devtools去看了，也不⽤去找⽂件打断点了，直接在vscode⾥⾯完成所有调试，真爽?如何配置使⽤？⾸先⽤live-server打开，你会发现浏览器⾃动跳转到localhost:5500上了。好，接着到进⾏配置

11121314{"type": "chrome","request": "attach","name": "Attach to Chrome","port": 9222,"webRoot": "${workspaceFolder}"},{"type": "chrome","request": "launch","name": "启动 Chrome 并打开 localhost","url": "localhost:5500","webRoot": "${workspaceFolder}"},配到这⾥，如果你直接试着直接去开启，发现是不⾏的，我刚开始尝试时掉进这个坑⾥，后来，在官⽅配置⽂档⾥找到了答案，需要对Chrome浏览器启动项进⾏配置关掉你现在的chrome，在去vscode调试⾯板上，换成Attach to Chrome，在启动，就可以了~?那么，让所有关于js调试都在Vscode⾥⾯搞定吧！调试de内置Node的调试环境，就不需要安装插件了，先创个名为的⽂件，然后在⾥添加配置

123456{"type": "node","request": "launch","name": "Launch Node","program": "${workspaceFolder}/"}配置完成后，在调试⾯板上，启动选项切换成Launch Node，然后启动就可以了，断点调试什么都是没问题的。Tips：我觉得如果是学习JavaScript的话，写demo配合Vscode⾥的Node的调试环境是不错的选择。⽤Vscode的Debugger对⽤框架(react,vue,ng)编写的⽹页调试也是⾮常⽅便的，⽅法也都差不多，这⾥不⼀⼀举例了，有兴趣的童鞋可以⾃⾏尝试?总结上⾯就是总结了，这⾥没啥写了，附上参考⽂档的链接吧⽂章作者:

⽂章链接:

版权声明: 本博客所有⽂章除特别声明外，均采⽤ 许可协议。转载请注明来⾃ ！