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
You can Follow the below Step By Step procedure to install the Angular state inspector Chrome Extension to your Chrome Web browser.
It is the Angular state inspector Chrome extension download link you can download and install Chrome Browser.
RxJS DevTools extension for debugging streams
Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.
Helps you in debugging AngularJS applications. Extends the elements panel in devtools to display scope properties.
Inspect the scope watchers of an Angular app
Angular 2 BatScanner extension
Browser DevTools extension for debugging Vue.js applications.
Angular context inspector
Devtools panel to visualize rxjs observables
Add shortcuts to easily debug your Angular application.
Redux DevTools for debugging application's state changes.