Angular state inspector Chrome Extension

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

How to install Angular state inspector chrome extension in chrome Browser

You can Follow the below Step By Step procedure to install the Angular state inspector Chrome Extension to your Chrome Web browser.

• Step 1: Go to the Chrome webstore https://chrome.google.com/webstore or download the extension Angular state inspector Chrome Extension Download from https://pluginsaddonsextensions.com
• Step 2: Now search for the Angular state inspector in Chrome Webstore Search and click on the search button.
• Step 3: click on the Angular state inspector Chrome Extension Link
• Step 4: in the next page click on the Add to Chrome button to Download and Install the Angular state inspector extension for your Chrome Web browser .