anton-lunev / angular-state-inspector

A Chrome extension that lets you inspect the state of components.

Angular State Inspector

An extension that lets you inspect the state of components.

Chrome: https://chrome.google.com/webstore/detail/angular-state-inspector/nelkodgfpddgpdbcjinaaalphkfffbem

Firefox: https://addons.mozilla.org/en-US/firefox/addon/angular_state_inspector/

Edge: https://microsoftedge.microsoft.com/addons/detail/angular-state-inspector/obfnbeenaokodmfahnfejnnalpeonijl?hl=en-US

angular-state-inspector's Issues

Chrome Canary

this extension incorrect work in Chrome Canary, but in basic Chrome, it works correctly

angular inspector not working while using dimensions

Link to GitHub on AMO

On your add-on listing in https://addons.mozilla.org/firefox/addon/angular-state-inspector you have no link to GitHub so it's hard to know where to report bugs.

A link,m you can e.g. provide on as an "support channel" or official homepage (which would appear in the left panel)would likely be very helpful.

Getter properties not appearing in State inspector

Love this extension!

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 they do appear in ng.probe($0).componentInstance.

Thanks!

In production release i not see the state

Hi, I made an app with Angular 11.0.6 and I don't see the state in production. Can you tell me why and how I could enable the extension in production? Thanks

Causes "Uncaught TypeError: ng.probe is not a function"

Uncaught TypeError: ng.probe is not a function
    isDebugMode ng-validate.js:1
    l ng-validate.js:1
    e ng-validate.js:1
    invoke zone.js:400
    runGuarded zone.js:171
    wrap zone.js:154
    className zone.js:940
    n ng-validate.js:1
    306 ng-validate.js:1
    r ng-validate.js:1
    305 ng-validate.js:1
    r ng-validate.js:1
    <anonymous> ng-validate.js:1
    <anonymous> ng-validate.js:1

...which you clearly use.

Should be easily fixable: https://stackoverflow.com/questions/56373044/error-in-console-ng-probe-is-not-a-function
In Ivy you can use getComponent instead.

Versions

add-on v1.5.0
An Angular v13.3.2 app
Firefox 101.0.1
Windows 10

Error: Cannot redefine property: $ctrl

I think this may be a similar problem to #2

Angular State Inspector no longer works in Microsoft Edge (Chome) v92

Hi,

Firstly, thanks so much for your awesome extension.

Your extension no longer seems to work in Microsoft Edge and displays blank -

The same page in Chrome -

In previous versions of Edge or your extension we were able view the state of a component using your extenson.

Regards,
Tarek

Hybrid application: broken angular 2+ context

Hello! Very nice and usefull extension!
Last version 1.3 stop working as before for hybrid AngularJs|Angular2+ application with downgrade module.
As seen on screenshot check for window.angular go first - and in my hybrid application there is always window.angular... But before the first check was if (ng && ng.probe($0)). May be just change to - 1) angular 2+ ; 2) angular Ivy ; 3) angularJs ?

plugin recently stopped activating in console

Great plugin - I use it all the time. It recently stopped working - not showing up in the console or showing an activated icon when I develop locally

Angular State Inspector v 1.4.5
Google Chrome 88.0.4324.192

Is there a way to force it into action on a given page? Thanks!

Hybrid application: no data for AngularJS 1

And again... ) Now it's not working when you try to look at angularJS data. For now I just take previous version of extension. May be later I will try create PR. Or I will become happy man without hybrid angular))

State tab blank in Chrome

Hi, similar to #16, I'm experiencing this issue as well.

on Chrome Version 92.0.4515.107 (Official Build) (x86_64)

However the state still accessible via $state in console.

support firefox

Hi,

is it hard to support firefox as well? I would like a lighter alternative to Augury.

You know Angular now has official devtools?

https://angular.io/guide/devtools

Just FYI, Angular also has official devtools now.

However, for the easy inspector integrator, I still like your extension.

Feature: Edit State Data

Hi @anton-lunev, just wondering if editing the variable is possible which was what Angular Dev Tools capable of doing.

Cannot redefine property: __debugInfo

Appears error

{
  message: "Cannot redefine property: __debugInfo",
  stack: "TypeError: Cannot redefine property: __debugInfo↵    at Function.defineProperty (<anonymous>)↵    at getPanelContents (<anonymous>:12:14)↵    at <anonymous>:18:3",
}

on some components.

Error: Cannot redefine property: $ctrl

Like #7, I receive the above error. Whatever component has focus when the page (re)loads will correctly display the information. Clicking any other element in inspector breaks it. The $state console shortcut appears to work fine. $ctrl returns null.

Some info: this is a large web app running Angular and React instances. Let me know if there's any other info I could quickly get you that would help. I'm not very familiar with Angular so I'm not sure where or what would help.