Angular state inspector chrome extension

Version: 1.4.6
Angular state inspector
Helps you debug Angular component state. Supports Angular 1/2+/Ivy!
4.72 Based on 58 user rates

What is Angular state inspector?

Angular state inspector is a element inspector extension for chrome. also, it is angularjs extension. it's a free extension , it has 30,000+ active users since released its first version, it earns an average rating of 4.72 from 58 rated user, last update is 1187 days ago.


What’s new in version 1.4.6?

                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            

How to install Angular state inspector?

You could download the latest version crx file or older version files and install it.


Preview of Angular state inspector


Technical Features:

  • Latest Version: 1.4.6
  • Requirements: Windows Chrome, Mac Chrome
  • License: Free
  • Latest update: Monday, August 23rd, 2021
  • Author: Anton Lunev

Angular state inspector Available languages:

English.


FAQ


Reviews of angular state inspector:


Oussama Dinia December 9th, 2021
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.


Joshua Josephson September 7th, 2021
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.


Hưng Hoàng July 28th, 2021
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.

Read more review & comments of angular state inspector