一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools-阿里云开发者社区

开发者社区> -技术小能手-> 正文

一个用于 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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
一个用于 Angular 开发的 Chrome 扩展 - Angular Dev Tools
11 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
过滤分享的Chrome扩展开发详解
明确需求 扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍:把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉,眼不见为净!描述得更详细些就是: 过滤功能只在人人网域名(http://*.renren.com/*)下启用; 只有访问人人网时,扩展的图标才显示; 好友的分享信息会出现在很多地方(如好友主页、新鲜事、分享主页等),这些都要过滤;
1213 0
博客园cnblogs chrome右键插件 开发
background.html   cnblogsright.js var tweettext = chrome.contextMenus.create({"title": "转载到博客园","contexts":["selection"], "onclick": posttwtext...
607 0
在Chrome开发者工具里手动测试element focus效果
在Chrome开发者工具里手动测试element focus效果
8 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13891 0
Chrome 扩展插件开发
闲来没事,试着玩下chrome 扩展插件开发,先记录下关键的东西吧。 1、创建一个开发目录 2、按照chrome扩展协定,创建:manifest.json文件,文件必须UTF8编码,文件中定义了些扩展的信息,属性和描述等。
607 0
使用 Chrome 开发者工具分析内存问题
使用 Chrome 开发者工具分析内存问题
17 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础HTML入门教程》
立即下载
《零基础CSS入门教程》
立即下载