Angular最新教程-第三节在谷歌浏览器中调试Angular

简介: Angular最新教程-第三节在谷歌浏览器中调试Angular

这节课,我们将要了解的是如何使用VS Code安装Chrome扩展对Angular进行调试。

步骤一:确保环境

确保将谷歌浏览器安装在其默认位置。

image.png

确保在VS Code中安装了插件:Debugger for Chrome

image.png

使用npm在全局范围内安装了angular/cli ,并且版本大于1.3
(我们第一节课中就讲过这个了,你也可以在确认一下。Windows用户快捷键win+r ,输入 ng -v)

image.png

使用angular/cli创建新的项目
ng new oniplan-ng
第一节课中我们已经创建过了。所以我们只要cd到项目目录,然后执行
code . 就可以了。
不喜欢使用命名行的,可以先运行VS Code,然后左上角文件-打开文件夹 选中项目文件夹。

image.png


步骤二:配置 launch.json 文件

点击调制-设置-Chrome,如图:

image.png

使用以下配置替换掉launch.json文件的内容

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}


步骤三:开始调试

在src/app/app.component.ts中设置断点。

image.png

在根文件夹上打开终端并使用angular/cli开启本地服务

在状态栏中选择查看-集成终端(也可以使用快捷键ctrl+` 数字1左边那个键,不是引号)

image.png 

执行npm start

image.png

然后进入调试界面,点击绿色按钮,启动调试。

 image.png

会自动打开谷歌浏览器窗口,然后再按F5刷新一下,就能进入断点了。

image.png

调试的时候的快捷键F10啥的都可以使用。


步骤四:调试单元测试

在单元测试src/app/app.component.spec.ts中设置断点

image.png

如果是新项目的话,设置断点的时候,可能会提示,已自动忽略断点,什么源文件映射啥的,可以不理会。下一步执行就会自动生成源文件。

在终端中执行 npm run test
刚才已经运行着npm start了,可以使用快捷键ctrl+c停掉当前的服务,再执行npm run test

image.png

然后进入调试界面,选择ng test ,点击绿色按钮,启动单元测试调试。

image.png


步骤五:调试End-to-end测试

接下来我们简要的说明一下端对端测试的调试。
- 首先先停掉终端里的服务ctrl+c,然后执行 ng server。
- 在调试里面选择ng e2e,点击绿色按钮。

image.png

- 刷新一下,查看控制台

image.png

英文原文链接:https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI


这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。  

目录
相关文章
|
28天前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
71 0
|
28天前
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程)
【2月更文挑战第13天】《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程) 上一篇文章,宏哥已经在搭建的java项目环境中实践了,今天就在基于maven项目的环境中给小伙伴们 或者童鞋们演示一下。
77 1
|
28天前
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程)
【2月更文挑战第12天】《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程) 前边宏哥已经将环境搭建好了,今天就在Java项目搭建环境中简单地实践一下: 启动三大浏览器。按市场份额来说,全球前三大浏览器是:IE.Firefox.Chrome。因此宏哥这里主要介绍一下如何启动这三大浏览器即可,其他浏览器类似的方法,照猫画虎就可以了。
55 1
|
27天前
|
监控 前端开发 JavaScript
深入探索谷歌浏览器开发者工具:提升网页开发与调试效率的终极指南(一)
深入探索谷歌浏览器开发者工具:提升网页开发与调试效率的终极指南(一)
|
27天前
|
存储 缓存 前端开发
深入探索谷歌浏览器开发者工具:提升网页开发与调试效率的终极指南(二)
深入探索谷歌浏览器开发者工具:提升网页开发与调试效率的终极指南(二)
|
28天前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
|
28天前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十三)-java+ selenium自动化测试-webdriver处理浏览器多窗口切换下卷(详细教程)
【4月更文挑战第15天】本文介绍了如何使用Selenium进行浏览器窗口切换以操作不同页面元素。首先,获取浏览器窗口句柄有两种方法:获取所有窗口句柄的集合和获取当前窗口句柄。然后,通过`switchTo().window()`方法切换到目标窗口句柄。在项目实战部分,给出了一个示例,展示了在百度首页、新闻页面和地图页面之间切换并输入文字的操作。最后,文章还探讨了在某些情况下可能出现的问题,并提供了一个简单的本地HTML页面示例来演示窗口切换的正确操作。
67 0
|
28天前
|
监控 前端开发 JavaScript
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
68 4
|
28天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
101 7
|
28天前
|
开发工具 开发者
谷歌浏览器打开DWG图纸,实现圆转多边形功能(在线CAD开发教程)
本文介绍了如何使用在线CAD SDK实现圆转多边形功能。首先,需搭建绘图环境和添加命令行交互。接着,通过mxcad库,根据用户输入的边数实现两种转换方式:内接于圆(目标圆为多边形外接圆)和外切于圆(目标圆为多边形内切圆)。具体实现包括选中圆、获取边数、选择转换方式,然后根据用户选择绘制多边形。最终展示了转换效果。
谷歌浏览器打开DWG图纸,实现圆转多边形功能(在线CAD开发教程)