Skip to content
Add shortcuts to easily debug your Angular 2+ application
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
icons
.gitignore
README.md
devtoolsBackground.html
devtoolsBackground.js
manifest.json

README.md

Angular Gauntlets

Add shortcuts to easily debug your Angular 2+ application

logo

Angular Gauntlets helps you getting your hands dirty. This chrome extension makes the components and providers of your Angular application accessible on click on an element in the Chrome DevTools elements panel.

Install

Download the extension from the Chrome Web Store:

https://chrome.google.com/webstore/detail/angular-gauntlets/cpinnkgbfohodioinipjdhehnihbgeph

How to use

Gauntlets is light, based on ng.probe, loads instantly and does not need to switch to another tab of the Chrome DevTools.

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.
  • $detectChanges(): triggers Angular change detection to get your changes apply.

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.

Demo

Playing with components

component

Playing with providers

providers

State preview

panel

License

MIT

You can’t perform that action at this time.