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

前言

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


题外话(号外)

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

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

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


Vs Code Debug(Ctrl + Shift +D)

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

部分快捷键

  1. 继续(F5)
  2. 单步跳过(F10)
  3. 单步调试(F11)
  4. 单步跳出(Shift + F11)
  5. 重启(Ctrl + Shift + F5 )
  6. 停止/结束(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 : 配置文件的请求类型,有launchattach两种,具体看官方文档
  • url:这个是chrome插件带的,指定访问的链接
  • webRoot:也是chrome插件带的,指定根目录或者执行文件
  • ${workspaceRoot}:就是你打开vscode读取的项目目录
  • sourceMaps:默认是启用的,对于打包的调试,小伙伴们必须开启
  • userDataDir:临时目录,专门保存调试过程产生的东西

启动调试

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

总结

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

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

  1. C#
  2. Python
  3. Chrome
  4. C/C++
  5. Go

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序之家

如何在小程序中实现文件上传下载

在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文...

14.6K70
来自专栏zaking's

走近webpack(4)--css相关拓展

  我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要...

444100
来自专栏FreeBuf

htcap:一款实用的递归型Web漏洞扫描工具

今天给大家介绍的是一款名叫 htcap 的开源 Web 漏洞扫描工具,它通过拦截 AJAX 调用和页面 DOM 结构的变化并采用递归的形式来爬取单页面应用(SP...

39430
来自专栏IMWeb前端团队

从smart漫谈打包

项目构建迁移到fis体系后,打包的问题就跟着来了。打包的基本方式是:分析依赖,合并文件,解决引入。 CSS处理方式 来源 link 引入 require 引入 ...

18170
来自专栏赵俊的Java专栏

Hexo搭建 --- 3、Hexo发布文章详解

24320
来自专栏云计算教程系列

如何在Ubuntu 14.04上保护WordPress免受XML-RPC攻击

WordPress是一个流行且功能强大的CMS(内容管理系统)平台。它的受欢迎程度可能会以专门针对WordPress网站的恶意流量形式引起不必要的关注。

5800
来自专栏一“技”之长

iOS 封装静态库(.a文件) 原

iOS中导入外部文件,一种是将源码导入,一种是导入静态库,有很多第三方库都是以静态库的形式提供给我们使用的,如何制作一个静态库呢?

10430
来自专栏王磊的博客

聊聊excel生成图片的几种方式

目录     I:需求。    II:实现思路。     III:实现方式。     IV:优缺点分析。     V:结论。     VI:wps安装与配置。 ...

371110
来自专栏向治洪

React Native自动化测试

大凡做软件开发,肯定会涉及到很多的测试,本地测试,Junit测试,用例测试等,今天就来说说RN的测试。 React Native的官方代码仓库里有一些测试代码,...

53550
来自专栏守望轩

Visual Studio 2008 每日提示(十二)

#111、定义最近使用的列表中显示项的数目 原文链接:How to customize the number of items shown in the re...

37740

扫码关注云+社区

领取腾讯云代金券