Vue-devtools: Vue panel stuck across three environments

Created on 30 Jan 2018 · 39Comments · Source: vuejs/vue-devtools

Version

4.1.2

Browser and OS info

Chrome 64.0.3282.119/ Windows 7 Mozilla 58.01/Windows 7 Electron version of Vue devtools

Steps to reproduce

*Running Vue through npm installed package [email protected]

*Laravel backend

*No Vue router, as Laravel handles routing through views

*Initial load of page (any page) works fine. Vue devtools working accordingly, inputs get updated, events tab
can be seen, etc

*Access different page url of the website

*Panel is now non-reactive to any mouse clicks

*Components from old url page still showing

*Cannot switch to events tab or any other tab

*Cannot do anything

*Vue panel works again after closing browser tab completely and reopening

*Hard refresh doesn't fix it

What is expected?

Vue panel to work accordingly

What is actually happening?

Vue panel is non-responsive

Same issue with Mozilla plugin, as well as electron standalone. All reinstalled today, issue remains.
Three different apps were tested, making sure no existing endless loop could cause this. Same issue.
It was working fine 3 hours ago.
Uncertain if issue is AFTER 29.01.2018 devtools update, as I don't notice when chrome updates my extensions

bug

Source

JustinDraude

👍13

Most helpful comment

Same here

ghost on 30 Jan 2018

👍16

All 39 comments

Same here

ghost on 30 Jan 2018

👍16

Same here. VueJS Panel works and when i reload the page i can't click on any tabs like _Components_ or _Vuex_. Only if i close the Developer Console in Chrome and restart it, i can do anything again.

I tried it in Chrome (Version 64.0.3282.119 (64-Bit)) and Firefox (58.0.1). I removed the extension and reinstall them.

poldixd on 30 Jan 2018

Same here, Chrome 64.0.3282.119

fnkky on 30 Jan 2018

When this happens there is also an error in console:

backend.js:1 Uncaught TypeError: Cannot read property '__VUE_DEVTOOLS_UID__' of undefined
at backend.js:1
at t.a.v.on.e (backend.js:1)
at t.a.n.emit (backend.js:1)
at e.listen.e (backend.js:1)
at n (backend.js:1)

csicky on 30 Jan 2018

👍2

@csicky No error for me, perhaps project related on your end.

JustinDraude on 30 Jan 2018

👍1

Exact same error as csicky, Chrome Version 63.0.3239.84 on Ubuntu Gnome.

franzi50 on 30 Jan 2018

same error

ejdrian313 on 30 Jan 2018

@csicky thats the same error we get

ghost on 30 Jan 2018

@JustinDraude To see error in console use the Vue devtools, refresh page, try to use Vue devtools again, error appears in console, at least on my side.
Anyway, all the things you described are exactly like that on my side too.

csicky on 30 Jan 2018

Same here

Version 63.0.3239.132 (Official Build) (64-bit)

Works again when i close the dev toolbar and open it

memic84 on 30 Jan 2018

👍1

Please update to 4.1.3 on Firefox (Chrome Web Store takes time to publish) and report back if the issue isn't fixed.

Akryum on 30 Jan 2018

🎉8 👍2

I'm still getting the issue in with Chrome Version 64.0.3282.119 (Official Build) (64-bit). @memic84 workaround of closing the dev toolbar and opening it again seems to work though.

inkbeard on 30 Jan 2018

@inkbeard Which version of the devtools?

Akryum on 30 Jan 2018

@Akryum
mac chrome: Version 64.0.3282.119 (Official Build) (64-bit)
vue: 2.5.13
vue-devtools: 4.1.2

inkbeard on 30 Jan 2018

😄2

same error
Vue 2.5.9
Windows Chrome Version 64.0.3282.119 (Official Build) (64-bit)
vue-devtools: 4.1.2

Amador368 on 30 Jan 2018

😄1

@Akryum : Sorry, I just saw your note about updating to 4.1.3, which the Chrome Store hasn't updated yet.

@Amador368 : You're running the same 4.1.2 version that I am.

Once I see the update come through the store, I'll check again.

inkbeard on 30 Jan 2018

In the meantime, you can just use Firefox and vue-devtools 4.1.3.

Akryum on 31 Jan 2018

👍3

Another workaround is Right click -> Reload frame in the panel.

Somrlik on 31 Jan 2018

👍12 🎉3

@Somrlik THANK YOU for that tip. This has been driving me insane.

ffxsam on 31 Jan 2018

@Somrlik Thanks it is resolved for now

hyounoo on 31 Jan 2018

Chrome Store is now hosting the updated 4.1.3 version. However, in my case (macOS, Chrome latest stable) the browser wasn't updating the extension. So I had to remove the extension, install it again, and then restart the browser for the changes to be picked up. After that everything worked like a charm.

mmieluch on 31 Jan 2018

You can enable the 'Developer Mode' in the extensions tab and a 'Update extensions now' button will appear. 🎩 ✨

Akryum on 31 Jan 2018

❤4

In case you're using electron as me just update electron-devtools-installer to the latest version.

DannyFeliz on 1 Feb 2018

I'm getting this error when I try to use the select tool on an element that's wrapped in a transition. Vue Dev Tools 4.1.4 and Chrome Version 65.0.3325.146 (Official Build) (64-bit) on Ubuntu.

mekhami on 3 May 2018

👍4

Same error, can not get it works
Chrome Version 66.0.3359.181 (Official Build) (64-bit) on Windows
Vue Dev Tools 4.1.4

tronjs on 16 May 2018

👍2

Same error, this happens when i had displaying a component in inspector that i've passed an array by prop, and i have a computed property that sort this array. When i change something that causes reactivity on this computed property is when this breaks down. If i delete the sort on this array in the computed property this came alive again.

AlexanderZon on 31 Jul 2018

👍2

Same here, when I have a getter that returns a sorted array, Vue dev tools die.

goodpixels on 25 Sep 2018

I was having the same problem with Vue devtools 4.1.3 on macOs High Sierra in Chrome 69.0.3497.100 .
Devtools crash every 3-5 minutes, had to reload again and again.
Removed the extension and reinstalled it. Yet to check how it performs.
Seriously, team - an appeal to you - please resolve the issue asap. Without devtools vuejs looses its appeal as the go to framework for me.

Update .
The problem still persists, only the duration between the crashes seems to have increased. The crashing of devtools happening at an interval of about 10-15 minutes. Don't really know what is causing the crash.

neeravp on 30 Sep 2018

macOs High Sierra in Chrome 69.0.3497.100 same error

eyaylagul on 11 Oct 2018

Same here newest version on mac

cerw on 13 Nov 2018

Still happening here in 2019. MacOS 10.13.16 with Chrome 70.0.3538.110.

backend.js:1 Uncaught TypeError: Cannot read property '__VUE_DEVTOOLS_UID__' of undefined
    at backend.js:1
    at t.a.v.on.e (backend.js:1)
    at t.a.n.emit (backend.js:1)
    at e.listen.e (backend.js:1)
    at n (backend.js:1)

jordanranson on 3 Jan 2019

👍1

I can reproduce with:
Vue DevTools 4.1.5 beta
Vue 2.5.22
Chrome 71.

daniele-orlando on 24 Jan 2019

👍1

Still happening here, Windows 10 with Vivaldi 2.2.1388.37. Not sure what version of vue devtools I had before but I just updated to 4.1.5 beta and it's still happening.

Cannot read property '__VUE_DEVTOOLS_UID__' of undefined

nathanchere on 31 Jan 2019

👍4

Any update?
Still experiencing this problem, although everything is up-to-date.

alirezamirsepassi on 5 Feb 2019

👍6 😕1

In my instance it turned out we had part of the build bundling vue.min.js instead of vue.js
It isn't just minified, it is also missing things like dev tools support
Ensuring we reference/bundle/whatever the non-minified (see: not production) vue.js fixed the problem for me.

nathanchere on 12 Feb 2019

Same problem here. Reloading the frame works - but it's annoying.