Angular State Inspector for Angular
Supports all versions of Angular:
– AngularJs
– Angular 2+
– Angular Ivy
– Hybrid apps (AngularJs + Angular)
Extends the Chrome Developer Tools for Angular web apps.
Adds new panel “State” to Elements tab, that displays the state of selected element.
Prints state of selected element in console by calling “$state” variable.
Depending on angular version it can show:
– Component state
– Directives
– Context, like ngForOf or ngIf values
– Event listeners
If they are applicable to the current element.
Angular State Inspector also allows you to modify the values in the “State” panel (double click on value) and from console(e.g. $state.title = ‘new value’).
To apply changes just call $apply() in console.
See all supported commands in chrome console.
Version 1.4:
– Full support angular 9 Ivy api
Version 1.3:
– Added experimental support of Ivy
– Added shortcuts that you can use in console
Super usefull. Every Angular developer should have it. One wish if we can we make it work with source maps on prod builds. That would totally rock.
So far so good, actually works unlike Augury.
Nice inspector nothing else to add
works smoother than augury, lean and nice.
Works good, but works only for Angular app running in development mode.
I do not see any ‘State’ panel in the Element tab for the chrome “Version 86.0.4240.198” for my angular app loaded in the page.
I think the extension is only compatible with some older versions of the browser.
Simple, fast, usefull.
At last! I cannot believe that this actually works, and it’s actually fast!
Really simple but that’s what devs need AFAIAC…
Thank you so much you beautiful people!!!
😀
I works fine, but unfortunately not all state changes are visible in real time
Great tool!
This makes debugging so much easier! Thank you!
Absolutely love this. Excellent work!
Works with ng1 and ng2 perfectly
I was tearing my hair out to debug Angular components until I found this – simply the biz.
A lot faster than Augury
Nice!
I like this extension. Fast, light and simple to use. BUT starting today my state is completly empty :O I have an hybrid angular application (angularJS with Angular2+) Can you help me to find a solution?
It’s very simple to use and light plugin. No overhead. Great
Herramienta muy útil en el desarrollo de App’s Angular, puedo ver el state de mis componentes sin la necesidad de estar haciendo logs de mis vars.
Un outil devenu indispensable lors de mes longues heures de debug !
Simple et redoutablement efficace, mon équipe l’a adopté, et je le conseil à tous développeur Angular 🙂
Extension was not working well. $scope did not show up and most items in $scope were not there either.
Awesome extension so far. It would be perfect if it modified the state panel of the selected element in real time as information in the model changes. I’ve yet to find any angular debugging extension that does that though.
It`s great!!!
Pretty simple and super useful! Enjoy to have that. Thanks!
Love it. GOODBYE Augury, hello simple understated Angular state inspector.
One thing though – can you show getter properties in the state inspector? I have @computed getter properties in my state that don’t appear currently, but do appear in ng.probe($0).componentInstance