Angular state inspector Chrome Extension

Angular state inspector chrome extension

Angular state inspector for Chrome Download

  • Chrome Extension Page
  • Total Number of Extension users:
    30K +
  • Reviewed by :
    61 Chrome Users
  • Author Name:
  • ['antonylunev@gmail.com', 'True', 'Anton Lunev']
Angular state inspector chrome extension is 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 its not available.
Version 1.4.5:
 - [ivy] Show info from ng.getComponent(). If its 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
<router-outlet _nghost-kai-c2> _ngcontent-kai-c2 class=grid _ngcontent-kai-c2 _nghost-kai-c3>..</app-hero-search> </app-dashboard> app-dashboard {heroService: HeroService, HttpClient, messageService: MessageService, Overview <head>..</head> <router-outlet y<app-dashboard _nghost-vcv-c2> _ngcontent-vev-c2 class=grid _ngcontent-vcv-c2 </app-dashboard> ><app-messages </app-root> “api/heroes HttpInterceptingHan... >httpOptions: HttpHeaders} messageService: {messages: Celeritas} Magneta} {heroService:

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 .

Angular state inspector Chrome extension Download

Looking for a method to Angular state inspector Download for Chrome then this download link is for you.

It is the Angular state inspector Chrome extension download link you can download and install Chrome Browser.

Download Angular state inspector chrome extension (CRX)

Related Chrome Extensions