rangle / augury

Angular Debugging and Visualization Tools
https://augury.rangle.io
MIT License
2.01k stars 216 forks source link

"State" section of Properties window doesn't always show up. #1114

Closed xouqoa closed 6 years ago

xouqoa commented 7 years ago

Augury version (required): 1.7 Angular version (required): 4.1.1 Date: 5/16/2017 OS: Windows 10

This is more of a general question than an actual issue, perhaps.

Some of our components don't show the State section of the properties window. It worked in the past, and then at some point it stopped. I'm not sure if this is a code change thing, or an actual issue with Augury.

I guess what I'm trying to find out is if there are any common code pitfalls that can cause this issue or not. In one parent component, we have a child component that doesn't show anything, and a separate child component that functions as expected. It's kinda weird and I'm just not sure what to look for/at.

JanEggers commented 7 years ago

same issue here,

it would be nice that in case augury is not able to display the state to generate a logmessage in the console or in the area the state would normally show up. that way we could provide better feedback whats not working or fix the issue in that component

colthreepv commented 7 years ago

I am having the same issue with version 1.9 Are you sure your version is 1.7? Chrome extensions should auto-update

xouqoa commented 7 years ago

I uninstalled/installed to get 1.9 -- it wasn't doing it automatically (Chrome Canary). Problem seems to be resolved for me at least. I'll keep an eye on it.

xouqoa commented 7 years ago

Still having issues with the State section not showing up. Would this have anything to do with lazy loaded modules, maybe?

Also, with the 1.9 update, I have to close the F12 tools if I reload my page or I get the "this is not an angular application" message in Augury. Separate issue I'm sure, but figured I'd mention it.

AlrikOlson commented 6 years ago

I noticed when we had a property that contained a "." in the name that the State section stopped showing up. As soon as we replaced the "." in the property, the State section showed up again.

This does not work: var options = { ... ... events: { 'froala.editor': true } }

This does work: var options = { ... ... events: { 'froalaeditor': true } }

mhengelein commented 6 years ago

Still having this issue with 1.15.0. :(

jacobedawson commented 6 years ago

I'm having this issue with 1.15.0 / Angular 5- not having the state available greatly reduces the use cases for this extension...

jainvishal520 commented 6 years ago

Any updates on this? I'm not able to see component states!

sunstar007 commented 6 years ago

Same here - I don't see the state on many of the components in our Angular 5 application (works on some components though). There's no error message to indicate what could be wrong, and the components are very similar in the way they're structured

kpodkalicki commented 6 years ago

Same here - no state of components visible for Angular 5 app.

lautaros86 commented 6 years ago

Same here - no state of components visible for Angular 6 app. Windows 10

santiago-elustondo commented 6 years ago

The bug described in #1283 is confirmed: Injecting Router into a component causes the disappearance of the state display. Is anyone else also injecting Router into their components? As in:

constructor( private router: Router ) {}

If not, are you injecting anything else? (HttpClient has also been reported to cause this, although it works for me)

MattWilliamsDev commented 6 years ago

@santiago-elustondo I am injecting ActivatedRoute in mine but not Router and having no luck seeing state. No HttpClient here either.

santiago-elustondo commented 6 years ago

Hey, thanks @MattWilliamsDev.

Is the state missing for all the components, or only those that inject ActivatedRoute?

santiago-elustondo commented 6 years ago

Can you try the latest Canary Build, and tell me if the issue persists there?

lautaros86 commented 6 years ago

Hi! i'm injecting HttpClient at some services, Router at some Components and ActivatedRoute in some other. But the state is missing for all components of app, even if I have no injection.

santiago-elustondo commented 6 years ago

@lautaros86, are you using version 1.16.1 of the Canary Build ?

santiago-elustondo commented 6 years ago

Version 1.16.2 released just now, which brings the official Chrome and FireFox versions up-to-date with the Canary Build. Please reopen if the issue persists.

s001dxp commented 6 years ago

I have Angular Version: 4.4.7 Augury 1.16.2

And do not see state on any of my components. BTW, it only worked sporadically in recent versions.

On one component, for example, I'm injecting custom built services and the StateService from ui-router.

slavede commented 6 years ago

I have Angular 5.2.3 and Augury 1.16.3. There are no states displayed :(.

$$el.context works fine

ltippmann commented 6 years ago

Angular 4.4.6, Augury 1.16.3. No state on 90% of the components. The issue is definitely not resolved.

I can see the property values of the component in the console via $$el.context just fine.

santiago-elustondo commented 6 years ago

Two new edge cases causing this issue have been identified and fixes have been applied in the new version of the Canary Build (version 1.17.1)

@lukeatron, @slavede, @s001dxp, can you confirm / disconfirm that version 1.17.1 of the Canary Build eliminates the issue for you?

slavede commented 6 years ago

@santiago-elustondo yes, it eliminates the issue for me. Thanks!

ltippmann commented 6 years ago

@santiago-elustondo I am now seeing the state for (I believe but haven't checked exhaustively) all components. It takes a little bit to load and display the state when I click on a component in the tree. Everything but the state shows immediately but while the state is loading the browser is unresponsive and loading can take 10s of seconds for more complex components with a lot of properties.

Also, mousing over the component tree causes the browser to go unresponsive for a couple seconds before it shows the hover highlight. It seems like there's some lengthy work being done in a synchronous context that's bogging down the browser (Chrome 66.0.3359.181 in my case).

I also just noticed that unreponsiveness is an issue when scrolling the properties pane.

Edit: after a little more poking it around, it seems that Augury is causing huge performance problems once it's loaded. If I open the dev tools pain then load the Augury tab and click on some component, after about 30 seconds the browser tab becomes basically unusable. If I click a button it can be upwards of a minute before I see any kind of visual response. If I close the dev tools pane the browser tab becomes responsive again (though it can take more than a minute for the browser to respond and the pane to close).

santiago-elustondo commented 6 years ago

Thanks for this detailed problem description, @lukeatron.

The issue you are describing, or a similar one, was fixed yesterday on the Canary Build.

Users experienced the tab slow down to a complete freeze after some interaction. We found it was caused by an interaction between augury and other active extensions, notably Redux DevTools.

Can you confirm / disconfirm that Canary clears the issue for you?

santiago-elustondo commented 6 years ago

Canary merged with master as official 1.18 release. Please reopen if this issue persists.

ReallyNotARussianSpy commented 6 years ago

I deactivated all of my extensions before posting. I am still experiencing the issue on both master and the Canary Build. I always see "No state to show". Angular 6.0.2, Chrome 65.0.3325.181, Fedora 27

image

lautaros86 commented 6 years ago

Its fixed for me! Thx!

ltippmann commented 6 years ago

I finally got a chance to test this. It's mostly working except for a few components that have a lot of public members that show up in the state pane. For these components the state pane shows "Loading component state..." for about 10 seconds then switches to "No state to show". It seems like it's timing out and giving up.

To be fair, I'm forced to run Norton AV on my machine by work policy and it absolutely butchers the performance. My gut feeling is that if the browser was running like it should, this wouldn't be an issue.

None the less, it would be nice if the state pane could be progressively loaded as things are resolved and maybe give up on particular fields if they're taking to long (perhaps with the option to lazy load those ones on demand if you really want to wait). Not getting any state info on these big crappy components (where most of the bugs live of course) really hampers the usefulness of the tool.

ReallyNotARussianSpy commented 6 years ago

Can this issue be reopened ?

santiago-elustondo commented 6 years ago

Thank you for the info, @lukeatron.

We are aware that this issue persists for some users.

We are currently attempting a fix-all solution. An example repository would be useful to help us figure out the outstanding cases that cause this problem.

ltippmann commented 6 years ago

The only place I'm seeing this behavior is in a poorly architected internal company application that I obviously can't share. After some more use I'm finding the problem is pretty pervasive and affects some components that I wouldn't expect to be problematic based on the number of properties alone. Perhaps some of these components have properties with very deep trees that need to be walked.

It does seem like loading is being cutoff by timeout as the message switches to "No state to show" at almost exactly 10 seconds every time. Are there any configuration variables for the timeout that I could mess with or is it hard coded to 10 seconds?

ReallyNotARussianSpy commented 6 years ago

@santiago-elustondo I was able to reproduce the issue in this repository: https://github.com/AdJesumPerMariam/augryissue1114

santiago-elustondo commented 6 years ago

Thank you very much, @AdJesumPerMariam. Will look at this today.

ReallyNotARussianSpy commented 6 years ago

Hi @santiago-elustondo ,

I installed 1.18.1 on canary and can see that the issue I have had with my project with the state being empty was fixed! Thank you very much!

The only issue I have now is that the component tree does not seem to be automatically updating as I navigate through the application. I have to close the console and open it again to be able to get the component tree of the current application state. I reverted back to 1.18.0 and this behavior exists on the Angular Tour of Heroes example. Let me know if you would like me to create another issue for this, or if this is expected behavior.

Thanks again!

santiago-elustondo commented 6 years ago

Thank you, @AdJesumPerMariam, your example repo was very helpful.

I became aware this morning of the issue you are describing. Please try the newest Canary Build (1.18.2). Let me know if that fixes it for you.

santiago-elustondo commented 6 years ago

@lukeatron, can you confirm this issue is resolved for you as well in Canary Build 1.18.2 ?

ReallyNotARussianSpy commented 6 years ago

Hi @santiago-elustondo. No problem! I tried the newest canary build and the issue I described is fixed now.

Thank you for your quick response to these issues! The extension is very helpful.

santiago-elustondo commented 6 years ago

Canary version released as Augury 1.19.0. Please reopen if you're still experiencing this issue.