qrcode

马上订阅,开启修仙之旅

Angular 工具篇之VSCode调试

今天是 “教师节”,借用我女儿小班 QQ 群内家长们发的祝福语,献给各行各业辛勤而伟大的老师们:

今天是教师节,感谢我的孩子遇到的每一位老师,是你们无私的付出让孩子有了无比精彩的人生!—— 老师是这个世界上唯一一个与你的孩子没有血缘关系,却愿意因您的孩子进步而高兴,退步而着急,满怀期待,助其成才,舍小家顾大家并且无怨无悔的人代表孩子祝老师们节日快乐 ,老师们辛苦了!

好的,现在我们步入正题。Visual Studio Code (简称 VS Code / VSC) 是一款由微软开发的跨平台编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码比对、Git 命令等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。

对于很多 Angular 的开发者来说,VSCode 是他们手中一把利器。此外对于大多数前端开发者来说,他们手中还有另一把利器,那就是 Chrome 浏览器。接下来,我们将介绍一下在 VSCode 中如何利用 Chrome 浏览器调试 Angular 应用。

首先,我们需要在 Chrome 商店中安装 Debugger for Chrome 扩展插件,成功安装后让我们重新加载一下编辑器。安装完插件只是第一步,下一步我们需要添加相应的配置文件。在 Mac 环境下按下 Command + Shift + D,然后点击左侧栏的齿轮图标,然后在下拉列表中选择 “Chrome”

debugger-for-chrome

之后,在项目的根目录下会生成一个 .vscode 目录,该目录下也会自动生成一个 launch.json 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

其中 url 是 Angular 应用程序的地址,通常情况下,在开发阶段我们会使用 Angular CLI 来辅助开发,使用 Angular CLI 我们可以运行以下命令来启动本地服务器:

1
$ ng serve

因为该服务器的默认端口是 4200,所以我们需要更新一下 launch.json 文件中默认的 url 配置:

1
"url": "http://localhost:4200"

最后我们就可以进入调试面板,点击运行按钮开始调试 Angular 应用程序:

launch-chrome-debugger

上面我们已经介绍如何使用 VSCode 和 Chrome 调试 Angular 应用程序。其实除了 Chrome 浏览器之外,在 VSCode 中我们也可以使用 Firefox 或 Edge 浏览器。跟之前一样,在调试前我们也得安装对应的扩展:Debugger for FirefoxDebugger for Edge。如果是首次配置的话,与 Debugger for Chrome 扩展的配置类似。

因为我们已经配置过 Debugger for Chrome,所以要配置 Debugger for FirefoxDebugger for Edge 扩展时,我们只需打开 .vscode 目录下的 launch.json 文件,然后点击界面中 “添加配置” 按钮,在下拉列表中选择 “Firefox: Launch (server)” 选项,具体如下:

debugger-for-firefox

之后,我们还需要更新一下默认生成的配置信息,具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Launch Firefox against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200 against localhost",
"webRoot": "${workspaceFolder}"
}
]
}

Edge 浏览器的配置方式类似,这里就不再展开,有需要的同学自行尝试一下。


欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode