Angular Gauntlets: A Helpful Tool for Angular Developers
Angular Gauntlets is a free Chrome add-on developed by yannickglt. It falls under the category of Browsers and specifically the subcategory of Add-ons & Tools. This handy tool provides shortcuts to easily debug your Angular applications, making it a must-have for Angular developers.
With Angular Gauntlets, you can access the components and providers of your Angular application directly from the Chrome DevTools elements panel. Simply click on a DOM element in the panel and use one of the following keywords in the console to access the desired functionality:
- $component: By clicking on a DOM element referring to an Angular component, you can access its instance and interact with it.
- $context: This keyword allows you to display the context of a DOM element, such as its parent Angular component or a ngFor row.
- $scope: Similar to $component, but applicable to child elements. It serves as a great alternative to AngularJS Batarang for Angular.
- $providers: This keyword provides a list of all the providers instantiated in your Angular app, allowing you to experiment with them (not supported by Angular 9).
- $detectChanges(): Use this keyword to trigger Angular change detection and apply your changes.
- log$(obs): This keyword logs the first value of the given observable.
In addition, Angular Gauntlets offers a preview of all this information in the Angular tab of the DevTools elements panel. Switching between elements will immediately refresh the data, providing you with real-time updates.
Overall, Angular Gauntlets is a valuable tool that simplifies the debugging process for Angular developers. Its intuitive interface and convenient shortcuts make it easy to access and manipulate components and providers within your Angular applications.
