search

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.63k stars 4.15k forks source link

Components become unclickable randomly #883

Open ffxsam opened 5 years ago

ffxsam commented 5 years ago

Version

5.0.0-beta.4

Browser and OS info

macOS 10.14.3, Chrome 72

Steps to reproduce

(bug occurs sporadically)

  1. Click on a component in the Components view

What is expected?

Inspection details should display.

What is actually happening?

Nothing happens (inspection details do not show up)

screencap

magicpotion commented 5 years ago

Same problem, devtools stopped working during update to Chrome 72

mdartic commented 5 years ago

If you update your page, devtools work again ? or is it blocked all the time ?

ffxsam commented 5 years ago

It doesn't work until I actually close the Chrome Developer Tools pane/window and reopen it.

magicpotion commented 5 years ago

on Linux/Chrome72, the Devtool is working on first page, once I switch page(no vue router) with Chrome Developer Tools open, it freezes and won't work until I restart Chrome, yet sometimes Vue Devtool Tab becomes invisible after that. It used to work flawlessly until Chrome72.

ffxsam commented 5 years ago

Any updates on this? It's terribly annoying, I have to close and reopen the Chrome DevTools pane several times per hour to get the Vue DevTools working again.

danyadev commented 5 years ago

On electron 4.x is still reproduced. Apparently, this appears after reloading the page.

Akryum commented 5 years ago

Please provide a minimal runnable reproduction.

danyadev commented 5 years ago

1) Open DevTools 2) Open Vue tab 3) Reload window 4) Check this issue

c0defre4k commented 5 years ago

I run into this problem very regularly. Also the "Inspect Vue Component" context menu button doesn't work and shows the no component found message. The only solution is to reload the dev-tools frame.

I also noticed that the loading indicator next to the "Inspect DOM" button doesn't stop anymore.

c0defre4k commented 5 years ago

I still haven't figured out whats the root cause of this problem, but wrapping this line in a setTimeout with at least 80ms solves my issue.

I don't know if google changed something in how chrome reloads pages. Without the timeout it seems as if the devtools tab is reloaded before the actual page is reloaded. You can see a short flicker if the components list. With the timeout this flickering happens after the page has been reloaded and clicking the components keeps working.

Edit: The issue lists version 5.0.0-beta.4 as affected, but I'm experiencing this issue with the latest 5.1.0 release.

alexcroox commented 5 years ago

Glad I’m not the only one suffering. Feel like I have to restart Vue Dev tools several times every hour because component details pane fails to update or the Vue inspector stops working.

gregveres commented 3 months ago

I run into this frequently. I didn't realize how often I was running into it when using 6.6.1 because of the bug that was fixed where selecting a Vue component didn't work. Now that that issue is fixed, I am finding I run into this quite a bit. There was another bug open for this that I can no longer find.

The great thing about the other bug report was that someone suggested right clicking on the Vue DevTools window and selecting "Reload frame". This restarts Vue devtools and then everything is happy again for another couple of minutes.

I think this might be getting triggered with HMR. At least in my workflow that's when I see it show up.