https://blog.csdn.net/crper/article/details/60957348

前言

很多小伙伴说用了打包工具(Webpack)之后，断点调试相当痛苦；
常规的方式无非是debugger,console.log()大法；
但是，vscode这货天生支持debug功能，不用白不用，今天我就说说怎么调教angular-cli;

题外话（号外）

最近vscode又更新了。。最新的版本是1.10.2;不详细解释，点一下;

引入了minimap(这个好啊)。在配置文件里面启用"editor.minimap.enabled": true;当然还有一些额外的小地图参数
内置JSDOC功能，又可以少掉一个插件, **触发
复制内容保持格式化，逼格满满，适用于复制到文档什么的
目录树引入了命令控制，可以自定义绑定按键啦，比如新建目录和文件
Debug功能强化,支持列断点，溜的飞起额
某些编程语言默认执行的配置文件设置
terminal输出的链接可以直接点击访问啦
HTML DOM的快速跳转
Debug的配置项更多了，天生支持gulp这些了。这些需要自行去研究文档哈

剩下的亮点自行去看发行日志啦…..

Vs Code Debug(Ctrl + Shift +D)

再来一次截图解释，怪我咯，不然不好说。。。

这里写图片描述

部分快捷键

继续(F5)
单步跳过(F10)
单步调试(F11)
单步跳出(Shift + F11)
重启(Ctrl + Shift + F5 )
停止/结束(Shift + F5)

安装插件

Debugger for Chrome : Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

简言之：就是让你的代码在chrome上调试，为什么vscode不集成这个，可能控制体积大小什么的。。

记得ng serve要先行启动,调试是调试，不包括引导angular-cli的启动;

配置文件很简单：

{
  "version": "0.2.0",
  "configurations": [{
    "name": "LaunchChrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/.vscode/chrome"
  }]
}

配置解释

version : 你定义这个配置文件的版本，默认是0.2.0，生成的时候
configuration：配置域
name：配置文件的名字，比如你可以叫做Debug Angular-cli
type：调试的类型，vscode天生支持node,比如go,php,chrome这些就依赖插件啦
request : 配置文件的请求类型，有launch和attach两种，具体看官方文档
url:这个是chrome插件带的，指定访问的链接
webRoot：也是chrome插件带的，指定根目录或者执行文件
${workspaceRoot}:就是你打开vscode读取的项目目录
sourceMaps:默认是启用的，对于打包的调试，小伙伴们必须开启
userDataDir：临时目录,专门保存调试过程产生的东西

启动调试

正确的情况下就会弹窗一个新的chrome页面，
打断点很简单，就直接在你需要断点的页面，点行号靠左的地方，有个小红点的地方，点击出来红色就是打上了(小红点再点击一次就是取消)，如图：
打开相应的页面，执行到响应的代码块就会触发debug了。。然后vscode就可以看到你想瞅瞅的数据了。。调试过程（单步什么的）,对应的本地文件会显示数据变动在你的

这里写图片描述

总结

VS Code的Debug功能相当好用，若是想引导程序启动再打开chrome这种也可以实现，就是需要写的配置文件比较繁琐，很花时间;

除了天生支持node内置debug,以下的都需要借助插件才可以

C#
Python
Chrome
C/C++
Go

本文已收录于以下专栏：
Visual Studio Code折腾记

VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

前言

题外话（号外）

Vs Code Debug(Ctrl + Shift +D)

再来一次截图解释，怪我咯，不然不好说。。。

启动调试

总结

猜你喜欢