Ember-inspector: Illegal invocation when using View tree.

[edwinramirez]

This just started today. To my knowledge, nothing has been updated in my local dev environment.
Chrome: Version 61.0.3163.100 (Official Build) (64-bit)
ember-cli: 2.4.3
node: 6.11.3
os: darwin x64 (Mac OS Sierra 10.12.6)

While on the View Tree tab,

• If I mouse over any element, the following warning is logged on my console instead of highlighting the view/component on my web page.

VM119:92 Ember Inspector has errored.
This is likely a bug in the inspector itself.
You can report bugs at https://github.com/emberjs/ember-inspector.
Error message: Illegal invocation
Stack trace: TypeError: Illegal invocation
    at Function.jQuery.access (http://localhost:4200/assets/vendor.js:6860:44)
    at jQuery.access (http://localhost:4200/assets/vendor.js:6832:11)
    at jQuery.fn.init.css (http://localhost:4200/assets/vendor.js:9469:10)
    at Class._highlightRange (<anonymous>:3970:14)
    at Class._highlightNode (<anonymous>:4448:12)
    at Class.previewLayer (<anonymous>:3536:16)
    at Object.apply (http://localhost:4200/assets/vendor.js:35964:18)
    at Object.sendEvent (http://localhost:4200/assets/vendor.js:29451:28)
    at Class.trigger (http://localhost:4200/assets/vendor.js:47264:25)
    at <anonymous>:2799:16

• If I click on the magnifying glass button and mouse over any element on my web page, instead of highlighting the element and displaying what view/component it is, the following error is logged on my console:

Uncaught TypeError: Illegal invocation
    at Function.jQuery.access (jquery.js:3505)
    at jQuery.access (jquery.js:3477)
    at jQuery.fn.init.css (jquery.js:6114)
    at Class._highlightRange (<anonymous>:3970:14)
    at Class.highlightView (<anonymous>:3946:12)
    at HTMLBodyElement.<anonymous> (<anonymous>:3662:18)
    at HTMLBodyElement.dispatch (jquery.js:4435)
    at HTMLBodyElement.elemData.handle (jquery.js:4121)

Since these warnings and errors occur with just moving my mouse then they stack to hundreds quickly. And as I said earlier, this just started today. Yesterday it worked fine.

[inkless]

This is due to Chrome upgrade.
They added a new property to ClientRect. For example, const rect = el.getBoundingClientRect(). Now rect has new property called toJSON. And in ember-inspector's older code, their is some incorrect jQuery usage: $(div).css(rect), this will trigger this bug.

The fix is update the pane-0-0-0 for older Ember version. I'm thinking about to send a PR. But meanwhile, you could try to use this plugin: https://ipfs.io/ipfs/Qmbn9D5ajAx4f4ZrMFiEMjxXVCmvk3sZ2vumu7QP9qL8GB
Just drag it directly to chrome://extensions

[mmarshak]

@inkless thank you for the fix. Do you know when a new version will be out there that fix it in the chrome extensions shop?

[edwinramirez]

@inkless Thank you. Your plugin works perfectly.
I'm not sure how to manage this ticket. Should I close it now? Or should I wait for a new version to come out?

[inkless]

@edwinramirez @mmarshak I don't know. When I was trying to send a PR to fix it, I just realize we might need some help from the admin team to upload an s3 file.
@teddyzeenny, can you guys provide some help here?

[teddyzeenny]

@inkless sure, you'd need to PR to the ember-0.0.0-2.7.0 branch instead of the master branch (make sure you start by branching from ember-0.0.0-2.7.0 instead of master as well). Once merged, I will build it and upload to S3.

[inkless]

Thanks @teddyzeenny , just sent a PR: #719

[rwwagner90]

Since the PR for this was merged, I am going to close the issue. If there is still a problem, please feel free to reopen!