VS Code 折腾记
来源:互联网 发布:5类网络端口怎么接 编辑:程序博客网 时间:2024/06/05 14:16
前言
很多小伙伴说用了打包工具(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
2 0
- VS Code 折腾记
- VS Code 折腾记
- VS Code 折腾记
- VS Code 折腾记
- VS Code 折腾记
- VS Code 折腾记
- VS Code折腾记 - (1)扯淡
- VS Code折腾记 - (2) 快捷键大全,没有更全
- VS Code折腾记 - (3) 多图解VSCode基础功能
- VS Code折腾记 - (4) 常用必备插件推荐【前端】
- VS Code 折腾记 - (5) Angular 2+ && Typescript 2 + 必备插件推荐
- VS Code折腾之常用必备插件推荐
- VS Code
- VS Code
- VS Code
- VS Code
- VS Code
- vs code
- 线程类Thread的API接口分析系列之Condition
- 腾讯、网易、凤凰、中国网、上海澎湃、中国青年网等媒体报道【汪国新委员:打造“中华国服正装”,保护和继承传统文化】
- ScrollView嵌套ListView使用,默认无法显示ListView以上的布局
- 有趣的C语言题目
- 实现android和web后台环境不同如何并存
- VS Code 折腾记
- 【阮一峰】TF-IDF与余弦相似性的应用(二):找出相似文章
- JDK并发包(concurrent)
- 清理缓存 转载请注明:IT_xiao小巫 博客地址:http://blog.csdn.NET/wwj_748
- Greenplum数据库视图
- 我很善良,为什么会得癌症?
- 什么是IPsec协议
- freeswitch 通话中发起视频呼叫的配置问题
- 如何在 NodeJs 上搭建 React 开发环境