此浏览器扩展程序使您可以轻松地可视化角度应用程序的组件树，从而易于理解…
此浏览器扩展程序使您可以轻松地可视化角度应用程序的组件树，从而易于理解组件的结构和关系。
激活扩展名并选择要概述的组件，通过组件名称（或组件选择器）或由前缀识别的组件家族（例如材料组件：aT-）选择性地进行概述。
当涉及代码审核时，Angular Outliner可以成为强大的工具。它允许开发人员快速演示并显示新代码增量的组件层次结构。这使得代码评论更加有效，从而节省了时间和精力。
_______________________________________________________________________________________________________
支持我：buymeacoffee.com/felixff
_______________________________________________________________________________________________________
通过在它们周围绘制框架来有助于可视化应用程序组件的Chrome扩展。
您可以在由前缀定义的组件命名空间（例如应用程序组件，``MAT'-材料组件等）或特定组件之间进行选择。
扩展名还显示组件实例计数。
_______________________________________________________________________________________________________
更新2.5
* UI简化
更新2.4
*悬停的概述组件
*组件图预览
更新2.3：
*当多个组件占据相同的空间时，改进的组件名称定位，因此标签不会重叠。
*滚动时改进UX - 重新绘制组件。
Angular Component Overview插件谷歌浏览器安装教程
第一步：下载Angular Component Overview安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
