一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools

简介: 一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools

该扩展安装到 Chrome 浏览器之后,Chrome 开发者工具会多出一个标签页:image.png

可以在 Component 面板里查看 Component 的属性,或者直接对其修改:image.png

在 Component 面板里双击某个节点,就能自动在 Angular UI 上将其对应的 DOM 节点高亮出来:

image.png

效果如下图所示:

image.png

能查看 Angular 当前版本:

image.png

点击该图标,能直接查看 Component 的实现源代码:

image.png

可以直接对 @Input 属性做编辑,并立即得到结果。

看一个例子:

下图 Popover 对话框,右上角具有一个 close 按钮。

image.png

这个按钮显示与否,通过 Directive 实现的 cxPopoverOptions 这个 input 属性的 displayCloseButton 字段指定:

image.png

我在 Angular Dev tools 里将其修改成 false,这样对话框里就没有 close 按钮了:

image.png

相关文章
|
6月前
|
缓存 JSON 前端开发
Angular 应用启用 PWA 特性的 Angular CLI 命令行
Angular 应用启用 PWA 特性的 Angular CLI 命令行
35 0
|
4月前
|
Web App开发 JavaScript 数据可视化
Angular 调试工具(Augury)
Angular 调试工具(Augury)
|
6月前
angular/platform-browser 开发包里的 BrowserModule
angular/platform-browser 开发包里的 BrowserModule
18 0
|
6月前
|
自然语言处理 JavaScript 前端开发
angular-devkit 中 build-angular 包的作用
angular-devkit 中 build-angular 包的作用
90 0
|
JavaScript
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
318 0
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
angular5-angular特性简介
angular5-angular特性简介
85 0
angular5-angular特性简介
|
移动开发 JavaScript 前端开发
Wijmo新版本支持Angular4和TS2.2
<p>  昨日,基于HTML5和JavsScipt的前端控件集Wijmo发布了最新的版本(Build293),在此版本中Wijmo增加了对最新Angular4以及TypeScript 2.2的支持,及一些更新。</p> <p>  更新日志</p> <p>  TypeScript库已经适用于TypeScript 2.2。</p> <p>  Angular的package.json已经升级为Angular 4。</p>
87 0
|
Web App开发 JavaScript 开发者
一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
254 0
一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
|
缓存 JavaScript 前端开发
Angular Universal:Angular 统一平台简介
Angular Universal:Angular 统一平台简介
177 0
Angular Universal:Angular 统一平台简介
使用 Angular CLI 创建基于 Angular 12 的应用
使用 Angular CLI 创建基于 Angular 12 的应用
129 0
使用 Angular CLI 创建基于 Angular 12 的应用

热门文章

最新文章