Helps you debug Angular component state. Supports Angular 1/2+/Ivy!
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.6: - Show info message if $ctrl is not available in selected scope. - Update $state object even if it's not available. Version 1.4.5: - [ivy] Show info from ng.getComponent(). If it's null then show OwningComponent state. Version 1.4.4: - update extension logo Version 1.4.3: - Return result emoji on `$apply()` call Version 1.4.2: - Fixed props editing and change detection Version 1.4.1: - Print always up to date state in 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
- (2022-05-10) Максим Ярош: Top
- (2022-05-04) Houssam B: This tool become a part of my daily work to debug and identify easily some root cause
- (2021-12-09) Oussama Dinia: Really cool, while the new angular devtools gives you the same view on a separate tab, state inspector lets you browse from the elements tab, while viewing your html. It is also fast and does not slow down anything.
- (2021-09-07) Joshua Josephson: Love it but it still doesn't work for me on chrome93 (M1 chip) so I had to bend over backwards to disallow auto-updates and install 91.
- (2021-08-06) Radek Jakubowski: I love it as Angular developer but it suddenly stopped working. I hope fix is going to come soon because it makes development heaven and hell for me.
- (2021-07-28) Hưng Hoàng: Nice tool for me when debugging. thanks for your effor FYI...as another one reported, latest chrome updated(Version 92.0.4515.107 (Official Build) (64-bit)) is show empty state.
- (2021-07-26) Roman Alesenkov: It worked perfectly until I updated Chrome from Version 91 to Version 92.0.4515.107 (Official Build) (x86_64) on MacOS. Could you fix it somehow?
- (2021-07-02) Justin W: Very handy. Eliminates the need for many debugging breakpoints and console.log statements.
- (2021-04-16) Fabien Mairesse: Much more reliable, efficient and useful than Augury.
- (2021-04-01) David Marshall: I was thinking of writing something like this because I was disspointed by Augury. But this is perfect. Thanks a lot !
- (2021-02-23) Andrei Vodeniktov: 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.
- (2021-02-10) Jakub Pyra: So far so good, actually works unlike Augury.
- (2021-02-09) Jelle Bruisten: Nice inspector nothing else to add
- (2021-02-02) Vlad Pintea-Gärtner: works smoother than augury, lean and nice.
- (2021-01-13) Joseph Gabriel: Works good, but works only for Angular app running in development mode.
- (2020-11-30) SANDEEP AGRAWAL: 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.
- (2020-11-19) Tin Nguyen: Simple, fast, usefull.
- (2020-10-13) Konstantinos Tsangopoulos: 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!!! :D
- (2020-10-01) Jacek Sochacki: I works fine, but unfortunately not all state changes are visible in real time
- (2020-09-16) Maxim Afanasev: Great tool!
- (2020-07-23) Greg Nielsen: This makes debugging so much easier! Thank you!
- (2020-01-15) Mike Wilton: Absolutely love this. Excellent work!
- (2019-12-19) Vitaly P: Works with ng1 and ng2 perfectly
- (2019-11-28) Paul Harwood: I was tearing my hair out to debug Angular components until I found this - simply the biz.
- (2019-11-25) Niall Shannon: A lot faster than Augury
- (2019-09-24) Quang Van: Nice!
- (2019-08-26) pedro reis: 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?
- (2019-08-19) 허상민: It's very simple to use and light plugin. No overhead. Great
- (2019-07-16) Jhonatan Hernández Baños: 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.
- (2019-05-19) Benoît Catillon: 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 :)
- (2019-01-30) Paul Gorbas: Extension was not working well. $scope did not show up and most items in $scope were not there either.
- (2019-01-16) Jacob Button: 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.
- (2018-12-21) Роман Жуков: It`s great!!!
- (2018-10-05) Vladislav Dekhanov: Pretty simple and super useful! Enjoy to have that. Thanks!
- (2018-08-31) John Hamm: 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
- (2018-08-31) Gerard Carbo: Simple, fast, usefull.
- (2017-09-28) Maxim Milovanov: Amazing, was looking for this! Thanks!
- (2022-01-21, v:1.4.6) Jawad Oasis: angular inspector is for noobs
ça marche pas votre truc
- (2021-11-11, v:1.4.6) Paul Gaske: Manually invoke the tool?
It seems like the tool doesn't detect an Angular app if there is a large delay between page load and the initialisation of the angular application. Well, at least I can never see the extension light up nor the tab appear in the debug tools. Is there any way to manually invoke the extension or manually tell the extension to attempt to re-detect an angular application?
- (2021-08-13, v:1.4.5) Emma M: Same as others, extension stopped working after latest Chrome update
As others metioned, extension stopped working after latest Chrome update
- (2021-08-04, v:1.4.5) Church TV: Extension stopped working in Chrome Version 92.0.4515.10 and Edge Version 92.0.902.62
The state tab in the devTools is empty no matter what I do. Something in the latest update on chromium browser seems to break the extension. I have reported to Chrome. Any version prior to Chrome Version 92.0.4515.10 works fine.
- (2021-07-26, v:1.4.5) Robert Ghafoor: Not working latest chrome version
The state tab shows up however when i select a element nothing shows up in the state tab, if i do angular.element($0).scope() i see the data in the console. im on: Version 93.0.4577.8 (Official Build) dev (64-bit) same when i use the non dev version.
- (2021-07-24, v:1.4.5) Николай Коваленко: Chrome 92 не отображает state
- (2021-07-23, v:1.4.5) Carlton Stith: Chrome extension not working
Hi. I have been using your extension to debug a software application that I am building. I updated my Chrome browser to Version 92.0.4515.107 (Official Build) (64-bit) and now I can't view State. Please help!
- (2021-05-26, v:1.4.5) BRAHMA TEJA PULIPATI: State showing empty
Not able to see any state content
- (2021-01-07, v:1.4.5) Luiz Rocha: State Panel Frozen
I don't know if it's normal, but the state panel isn't updating the variable's content, the lists, etc. Great extension by the way.
- (2020-07-02, v:1.4.5) Paul Brown: State tab is not showing up in Chrome
Hi, Great Extension which I have been using for a while. Lately though the state panel has not been showing up in the elements tab - chrome version 83.0.4103.116 (Official Build) (64-bit) - I've no idea why! Hope you can shed some light on it! Cheers
- (2020-04-22, v:1.4.3) Michael Peteichuk: Chrome Canary
this extension incorrect work in Chrome Canary, but in basic Chrome, it works correctly
- (2020-04-02, v:1.4.3) Interrupted download.
I click add to chrome and it says error download interrupted. Adding other extensions works just fine.
- (2020-03-03, v:1.4.1) Николай Коваленко: Cannot redefine property: $state
В одном проекте показывает состояние только 1 раз. При переключении на другой тег вместо стейта показывается ошибка: stack: "TypeError: Cannot redefine property: $state at Function.defineProperty (<anonymous>) at <anonymous>:157:14 at Array.forEach (<anonymous>) at exportToWindow (<anonymous>:156:38) at getPanelContents (<anonymous>:11:5) at <anonymous>:182:3"
- (2020-02-13, v:1.3.8) dinesh muthu kumar: Learning the angular
Hi All, I am dinesh muthukumar . i am become a perfect angular developer . so how to start learning in angular . my email is [email protected]
- (2019-01-16, v:1.2) Jacob Button: Real time state/model updates on selected element
If I have the state panel open on an element, and I modify the model in some way such as form interaction, it would be nice to have the state panel update in real time. As it stands I have to select a different element and then re-select the element I'm actually watching in order to see the changes reflected in the model.