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

Advertisement

前言

很多小伙伴说用了打包工具(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. 打断点很简单,就直接在你需要断点的页面,点行号靠左的地方,有个小红点的地方,点击出来红色就是打上了(小红点再点击一次就是取消),如图:
  3. 打开相应的页面,执行到响应的代码块就会触发debug了。。然后vscode就可以看到你想瞅瞅的数据了。。调试过程(单步什么的),对应的本地文件会显示数据变动在你的


总结

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

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

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

Similar Posts:

  • VS Code折腾记 - (2) 快捷键大全,没有更全

    前言 VSCode的快捷键继承了一些IDE风格,有VS的身影,也有Emacs的身影..简言之,内置快捷键玩熟了,效率提高不是一点两点. VsCode 快捷键有五种组合方式(科普) Ctrl + Shift + ? : 这种常规组合按钮 Ctrl + V Ctrl +V : 同时依赖一个按键的组合 Shift + V c : 先组合后单键的输入 Ctrl + Click: 键盘 + 鼠标点击 Ctrl + DragMouse : 键盘 + 鼠标拖动 通用快捷键 快捷键 作用 Ctrl+Shift+

  • 边学边记,内置函数

    enumerate(list,start=0) 返回tuple对 map(f,list)对list所有元素进行f操作,f单参数 s.capitalize() s首字母大写其余小写 sum(list) 求和 reduce(f,list,start) 对list进行f操作,start可有可无,为初始值,f双参数 isinstance(oj,type) oj是type类型则返回true filter(f,list) f返回bool类型,若元素令f为true则保留,返回若不为bool,空,'',none

  • iOS应用内置付费In-App Purchases入门

    成为ios开发者最大的好处就是,你编写的应用程序会有很多方式可以赚钱.比如,收费版,免费挂广告版,还有就是程序内置购买. 程序内置购买会让你爱不释手,主要有以下原因: 除了程序本身的下载收费以外,你还可以赚更多的钱.一些用户愿意为那些额外的功能花费大量的金钱. 你可以免费发布你的程序(这样的话,用户就可以任意下载了),如果他们喜欢这个程序的话,那么就会有人愿意购买额外功能. 在你做完一个程序的时候,你可以在以后的发布版中添加更多的功能,然后这些功能可以用内置购买,这样的话,你就不用再重新制作另一

  • 现代浏览器中内置的可以等效替代jQuery的功能

    jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,但其中的一些用来兼容老式浏览器的代码你无法 去除. 就我的个人习惯来说,不管开发什么项目,即使是一个很简单的demo,我做的第一件事就是引入jQuery,这样做主要是想使用它提 供的DOM选择器功能.对于一些像IE6/IE7这样的老式浏览器,这种做法是显而易

  • 提升购书体验 下一代Nook将内置NFC

    我们已经了解到,微软已向Barnes & Noble旗下的Nook电子书业务注资3亿美元,意在进入电子书阅读器市场.最近,B&N公司CEO William Lynch向媒体透露,该公司未来将会发布至少一款内置NFC功能的Nook,并将改善书店的交互式发展. 与出版商合作图书内置NFC芯片 Nook内的NFC芯片将如何利用它的近距离无线通信功能?Lynch表示,Barnes & Noble会和出版商通力合作,将NFC芯片嵌入到书皮封面和店内标牌里面,让用户只需将Nook靠近即可获取图

  • win7中内置的指纹识别功能怎样使用(图文)

    随着大家对计算机信息安全的的重视程度日益提高,给 Windows 帐户配置一个强壮的密码几乎成为了每个用户的标准配置,但复杂而冗长的密码字符串往往难以记忆,遇到遗忘密码的状况就会严重影响用户对计算机的使用体验. 指纹识别技术的逐步普及为用户帐户密码管理提供了新的途径,计算机通过对用户指纹的扫描来自动登录对应的用户帐户. Windows 7 操作系统对于指纹识别设备提供了内置支持,您无需再为指纹识别器安装第三方应用程序即可通过 Windows 7 内置的功能实现用户帐户的生物识别管理. 步骤本文以

  • python 的几个内置函数(lambda ,zip filter )用法

    python的内置函数功能比较丰富,而且相当灵活,目前掌握了几个比较常用的 1.lambda lambda其实就是一条语句,lambda(x):body.x是lambda函数的参数,参数可以有任意多个(包括可选参数);body是函数体,只能是一个表达式,并且直接返回该表达式的值. >>>f=lambda x:x+1 >>>f(2) 3 >>>(lambda x,y:x+y)(2,3) 5 2.filter filter(func, list)接受两个参

  • Atom编辑器折腾记_(18)atom内运行gulp的实现方法[酷炫]

    效果图 atom编辑器内置一个gulp执行面板; 左边是探测到gulpfile的队列任务,单机即可运行-右边就是执行的状态预览; 本人只实现了三个面板,因为现在不用grunt了-可以汇总错误信息 功能实现 单纯的gulp面板只依赖两个插件 - bottom-dock - gulp-manager package 两者缺一不可; bottom-dock不仅仅可以实现gulp面板,还能实现todo[很实用的功能],还有grunt队列也能实现; 这些功能都是同一个封装好的插件; 面板快捷键 三个面板有

  • Python笔记第3章,模块和模块的常用方法,函数式编程yield,三元运算Lambda表达式,内置涵数,常用模块

    <--目录--> 模块和模块的常用方法 函数式编程 yield 三元运算 Lambda表达式 内置涵数 常用模块 [模块和模块的常用方法] 至关重要的__init__.py #包一定要有这个__init__.py文件,他才是包,这样才能通过form 包名 import 模块名(.py文件名)来去引用这个包的某个模块的某个函数功能 判断是否为主文件:__name__ if __name__ == '__main__' 当前文件路径: __file__ 当前文件描述: __doc__ 1)if _

  • [资料搜集]C#内置事件 XML SVN Yield Thread

    C#内置事件机制在Unity3D应用 Unity3D是現在越來越流行的3D遊戲引擎,它支援JavaScript,c#和Boo語言.如果你是個Unity3D的愛好者,但只會JavaScript.這裏有一篇文章關於處理事件和消息傳遞,也許更適合你.A Useful Messaging System 你知道C#有一個內置的事件機制嗎?這個東東在Unity3D裏也非常好用.下面舉一個例子. 為了回應一個GameObject的事件分發,你通常要建立一個腳本繼承MonoBehaviour並且實現你需要的方法

Tags: