This browser extension allows you to easily visualize the component tree of an Angular application, making it easy to understand…
Angular Component Overview Extension
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.
Read more
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.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Angular Component Overview", "version": "2.5", "content_scripts": [ { "matches": ["http://localhost/*", "https://localhost/*"], "js": ["js/content.js"] } ], "action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "web_accessible_resources": [ { "resources": ["js/tracer.js"], "matches": ["http://localhost/*", "https://localhost/*"] } ], "permissions": ["storage"]}
Read more