Illegal invocation when using View tree.

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

[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.