Angular 工具篇之VSCode调试

栏目: 编程语言 · AngularJS · 发布时间: 6年前

内容简介:今天是 “教师节”,借用我女儿小班 QQ 群内家长们发的祝福语,献给各行各业辛勤而伟大的老师们:今天是教师节,感谢我的孩子遇到的每一位老师,是你们无私的付出让孩子有了无比精彩的人生!—— 老师是这个世界上唯一一个与你的孩子没有血缘关系,却愿意因您的孩子进步而高兴,退步而着急,满怀期待,助其成才,舍小家顾大家并且无怨无悔的人代表孩子祝老师们节日快乐 ,老师们辛苦了!好的,现在我们步入正题。

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

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

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

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

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

Angular 工具篇之VSCode调试

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

{
    // 使用 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 我们可以运行以下命令来启动本地服务器:

$ ng serve

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

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

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

Angular 工具篇之VSCode调试

上面我们已经介绍如何使用 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)” 选项,具体如下:

Angular 工具篇之VSCode调试

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

{
    "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 浏览器的配置方式类似,这里就不再展开,有需要的同学自行尝试一下。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

设计心理学

设计心理学

Donald Norman / 梅琼 / 中信出版社 / 2003-10-1 / 23.00

设计心理学,ISBN:9787800739255,作者:(美)唐纳德·A.·诺曼(Donald A. Norman)著;梅琼译;梅琼译一起来看看 《设计心理学》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具