基本信息

更新日期:
包名:
ffaclkhkellkeknodafdgeaapdniahhh
版本:
2.5
大小:
874KiB
类型:
扩展
平台:
Chrome
评分:
发布日期:
2024-03-17
价格:
免费
开发者:
angular.outliner

Angular Component Overview插件截图

【图】Angular Component Overview(截图1)【图】Angular Component Overview(截图2)

Angular Component Overview插件简介

This browser extension allows you to easily visualize the component tree of an Angular application, making it easy to understand the structure and relationships of the components.

Activate the extension and select which components to outline, either selectively by component name (or by component selector) or component family identified by a prefix (e.g. material components: mat-).

When it comes to code review, Angular Outliner can be a powerful tool. It allows developers to quickly demonstrate and show the component hierarchy of the new code increment. This makes code reviews more efficient and effective, saving you time and effort.

______________________________________________________________________________________________

Support me: buymeacoffee.com/felixff

______________________________________________________________________________________________

Chrome extension that helps to visualize application components by drawing a frame around them.

You can choose between component namespaces defined by prefixes (e.g. `app` – application components, `mat` – material components, etc.) or specific components.

The extension also shows component instances count.

______________________________________________________________________________________________
Update 2.5
* UI simplification

Update 2.4
* Outline component on hover
* Component graph preview

Update 2.3:
* Improved component name positioning when multiple components occupy the same space, so labels do not overlap.
* Improved UX when scrolling – components are redrawn.

类似Angular Component Overview插件

Select any angular element on a page and inspect at its scope
Select any angular element on a page and inspect at its scope
Add shortcuts to easily debug your A..
Add shortcuts to easily debug your Angular application. Angular Gauntlets helps you getting your hands dirty. It makes the components and providers of your Angular application acce..
Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.
You can use Angular DevTools to understand the structure of your application and preview the state of the directive and the component instances. To get insights into the execution ..
Angular Profiler is a developer tool..
Angular Profiler is a developer tool to power-up Angular development workflow by providing a series of debugging tools. Angular Profiler for Ivy, debugging and visualisation tools
A browser extension that will remind..
A browser extension that will remind and teach you an RxJs operator a day. RxJs is a Javascript library for reactive programming using observables that makes it easier to compose a..
Useful app.augury.com features This ..
Useful app.augury.com features This App blurs content of Augury appat the URL app.augury.com
Helps you debug Angular component st..
Helps you debug Angular component state. Supports Angular 1/2+/Ivy! Angular State Inspector for Angular Supports all versions of Angular: AngularJs Angular 2+ Angular Ivy Hybrid ap..
See through the observables
RxJS Insights is a toolset that helps you debug and visualize the observables in your app. ✨ Developer friendly: Easy to set up. Easy to use. ✨ Unobtrusive: Does not require source..
Detect angular applications and java..
Detect angular applications and javascript libraries run on browsing website. Use this tool to detect what is running under the hood on the webpages you visit. Most importantly, de..
Streamlines your workflow for testin..
Streamlines your workflow for testing pages in Google Tag Manager The GTM Super-Saver extension helps make your marketing tagging easier by automatically refreshing your preview ta..
Extension SMAG pour faciliter la ges..
Extension SMAG pour faciliter la gestion des tâches / tickets entre gitlab et jira. Extension SMAG pour faciliter la gestion des tâches / tickets entre gitlab et jira.
Git Diff Flex adds a draggable pane ..
Git Diff Flex adds a draggable pane bezel between two files when comparing diffs! Currently only for github.com.
Tailoranalyze all your cookies Tailor fetch browser's cookies and analyze them
Tailoranalyze all your cookies Tailor fetch browser's cookies and analyze them
Add a TortoiseGit clone button to Bi..
Add a TortoiseGit clone button to BitBucket and PR common issue assistance. BitBucket is very Atlassian orientated (on account of having been written by them). SourceTree is a fine..
This Chrome extension is developed p..
This Chrome extension is developed primary for http://tokbox.com/. It doesn't do anything except capture content of your screen.
Allows to see best answer to given q..
Allows to see best answer to given question on stackoverflow.com (Like Google's "I'm feeling lucky" function) Quickly find an answer on stackoverflow.com. Type in your problem, hit..
View in memory SQLite databases and tables
View in memory SQLite databases and tables Provides GUI to view Data and run queries on SQLite Web database instances used by any website for developer debugging and analytics purp..
Find fonts by hovering over text. Hover over text to display font family.
Find fonts by hovering over text. Hover over text to display font family.
有时您想快速查看哪个是您正在查看的项目的当前发行版本。此扩展在GitHub存储库页面上的名称旁边显示最新版本的版本。
有时您想快速查看哪个是您正在查看的项目的当前发行版本。此扩展在GitHub存储库页面上的名称旁边显示最新版本的版本。

Angular Component Overview插件下载

免费下载插件商店插件官网

插件评论

Samiulla

I does the job of giving you the best overivew of your component. It also detects if third party library is used, for instance you can easily toggle the angular material components. I really like that feature. Further more there is filtering, sorting and tracing.

Felix

Nice.