Ember-inspector: Ember Inspector locking up

[thirstybear]

OHai

I'm using Ember Inspector 2.0.1 in Chrome 53.0.2785.89 (64-bit) with the following:
ember-cli: 2.7.0
node: 6.5.0
os: OSX El Capitan 10.11.5

When I start up the inspector, it is unresponsive - you cannot select any of the left hand menu options.

I have now disabled all of the other plugins, and the same thing happens.

Any thoughts?

Thanks in advance.

Chris

[anlumo]

I've got exactly the same issue.

Chrome 53.0.2785.89
ember-cli: 2.7.0
ember: 2.7.2
os: macOS El Capitan 10.11.6

When I click on a section on the left hand side, close the inspector and open it up again, it opens with that section selected. On the Data section, the model types are displayed, but clicking on any model hangs the inspector. Clicking on any other section also hangs the inspector.

[teddyzeenny]

Can you provide me with any online app, jsbin, public repo where that happens so I can reproduce the error?

[anlumo]

I just updated our ember app deployment from 2.5 to 2.7.2. When it was 2.5, it worked. With 2.7.2, the inspector is broken just as in my local development version. Same browser, same OS.

Here's a sample page for it: https://my.mindnode.com/eTuzx6zNRbd22TT3mr5KxnhbjsdvYysLWPsxHxk1

[teddyzeenny]

@anlumo the inspector is working fine for me on the link you sent. I think it needs a specific set of steps to reproduce. Any idea what they might be?

[anlumo]

I just tried it in incognito mode (so other extensions aren't loaded), but it still locks up. There are no special steps needed, just opening up the inspector and clicking on anything.

[thirstybear]

I was simply going through the example at https://guides.emberjs.com/v2.7.0/getting-started/quick-start/ so nothing complicated. It also does it on client projects. I'm happy to push the simple tutorial code somewhere, but I'm not sure how valuable that might be - it really is very basic (one route, one app, two templates, one test).

[GRardB]

I've been having issues as well. As everyone else said, there are no steps to reproduce. I simply open up the Chrome Inspector and click "Ember," and I'm unable to click on anything.

My website: https://www.guapington.com/
(It also doesn't work on localhost).

• Mac OS X 10.11.6
• Chrome 52.0.2743.116
• Ember CLI 2.8.0
• Ember 2.7.1
• Ember Data 2.8.0
• Node 6.3.1

If there's any more info I can provide that may help, I'd be happy to share!

[teddyzeenny]

I can't reproduce this. I will need someone to debug this for me. We need to check if an error is being thrown. To do that we need to open the inspector's console:

1. Undock devtools into a separate window.

1. Then with the undocked devtools window focused, open devtools for devtools.
2. Check the console for errors.

[anlumo]

VM75:160 'window.postMessage(message, transferables, targetOrigin)' is deprecated and will be removed in M54, around October 2016. Please use 'window.postMessage(message, targetOrigin, transferables)' instead. See https://www.chromestatus.com/features/5719033043222528 for more details.
ember-inspector.js:342 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
ember-inspector.js:5237 Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
VM1025:155 'KeyboardEvent.keyIdentifier' is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5316065118650368 for more details.

[teddyzeenny]

@anlumo thanks for this! Looks like it's the security error. Can you confirm it's fixed if you uncheck Block third-party cookies and site data checkbox in chrome://settings -> Content Settings? (Don't forget to close/reopen devtools after toggling).

Last checkbox in the screenshot below:

[anlumo]

Yes, removing that checkbox fixes the inspector! So that's why there were multiple people who could reproduce it and you couldn't.

[thirstybear]

Thanks for your help, guys. Much appreciated!

[calmwater]

This fixed my problem as well. I am not sure why my production app had the same issue with no third party cookies involved in the app. This looks to be a change somewhere other than my code.

[teddyzeenny]

@calmwater the Ember Inspector is the third party app and it uses local storage (which is blocked by this security setting).

[calmwater]

Thanks for the clarification! That makes great sense.

[VNBharadwaja]

If ember inspector is unresponsive in Chrome, you could try selecting the Allow access to file URLs checkbox in Ember Inspector-> Manage Extensions