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 accessible on click on an element in the chrome devtools elements panel.
How to?
Just click on a DOM element in the DevTools elements panel, type one of the following keywords in the console and here we go!
- $component: click on a dom element referring to an angular component to access its instance and playing with it.
- $context: display a dom element context, can be its parent angular component, a ngFor row, etc.
- $scope: equals $component onto angular components or $context onto child elements. The best alternative of AngularJS Batarang for Angular.
- $providers: get the list of the all the providers instantiated in your Angular app and play with them (not supported by Angular 9).
- $detectChanges(): triggers Angular change detection to get your changes apply.
- log$(obs): log the first value of the given observable.
Little extra: you can get a preview of all these info in the angular tab of your DevTools elements panel. Switching between elements will refresh the data immediately.
You can Follow the below Step By Step procedure to install the Angular Gauntlets Chrome Extension to your Chrome Web browser.
It is the Angular Gauntlets Chrome extension download link you can download and install Chrome Browser.
Tags: Angular Change , Chrome Devtools Elements Panel , Dom Element Context , Devtools Elements Panel , Ngfor Row , Dom Element , Devtools Elements Panel Type , Angular Component , Angular Components , Add Shortcuts , Component Click , Angular Application , Child Elements , Angular Change Detection ,
This extension is recommended for Angular developers. Its purpose is to make an idea how an Angular page is composed and which…
Angular 2 BatScanner extension
Angular Inspector for Angular 9+ (Ivy)
Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.
Helps you debug Angular component state. Supports Angular 1/2+/Ivy!
Detect Angular apps and javascript libraries
Helps in debugging Angular(1.x/4+/Ivy) applications. Extends the elements panel in devtools to display component properties.
browser extension for configure
Check how many watchers are active in an angular app
Angular context inspector