Devtools Gets "Stuck", Doesn't Refresh on Browser Refresh

[c9845]

Vue devtools version

6.6.1

Link to minimal reproduction

https://play.vuejs.org/

Steps to reproduce & screenshots

1. Browse to a page Vue is used on.
2. Open Vue DevTools.
3. Click on an app, inspect it's data, etc.
4. Refresh the page.
5. Try to select any app (same or different).
6. Vue DevTools doesn't update. Refresh button in Vue DevTools does nothing.

Note that the same issue occurs if I simply navigate to another page Vue is used on. The DevTools doesn't refresh to the state of the new page or list the apps registered for the page.

The only fix is to close the browser DevTools window and reopen it.

What is expected?

Vue DevTools to refresh, not get stuck, not hang, when the page is reloaded.

What is actually happening?

Vue DevTools hangs.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 3.63 GB / 15.70 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.92)
    Internet Explorer: 11.0.22621.1
    (Also have FireFox installed but it doesn't show up for some reason).

Any additional comments?

The same issue occurs in Chrome and Firefox. Issue seems to affect apps using legacy v2.7.16 and v3.x.x branches in the same manner.

Using an old version of Vue DevTools (v5.3.4) has no issue. Running v6.5.0 or v6.6.0 via npm with the <script> tag has no issue. I could not get the latest version to load (the websocket connection never establishes and the V logo just pulses forever).

[angelacaldas]

This is happening in Microsoft Edge as well. My Vue DevTools is v6.6.1. My Edge is v122.0.2365.92

[didaquis]

Same issue here using Chrome on macOS. Version: 6.6.1.

Moreover, a weird error is logged on browser console at the same time:

[gregveres]

I think this is the same issue as: #2144

[c9845]

@gregveres I am not so sure this is the same issue at #2144. #2144 says the "web tabs are frozen, and the Microsoft Edge can't close". This is not the issue I am experiencing. My issue is Vue DevTools itself is stuck/frozen/won't update. I can close browser tabs or DevTools without any issues. Actually, my "fix" for my issue is closing and reopening the browser DevTools. I guess there could be something underlying that is related between both of these issues.

I have been trying to find some debugging or logging but haven't been able to find anything. Any ideas?

[gregveres]

@gregveres I am not so sure this is the same issue at #2144. #2144 says the "web tabs are frozen, and the Microsoft Edge can't close". This is not the issue I am experiencing. My issue is Vue DevTools itself is stuck/frozen/won't update. I can close browser tabs or DevTools without any issues. Actually, my "fix" for my issue is closing and reopening the browser DevTools. I guess there could be something underlying that is related between both of these issues.

I have been trying to find some debugging or logging but haven't been able to find anything. Any ideas?

You might be correct. I have experienced everything you are experiencing since the major upgrade. Devtools gets very confused or locks up. My work around is the same as yours. It is annoying but it gets the job done.

Unfortunately I don't know the devtools code base so I have no idea where to even start looking.

[taylordragoo]

I get the same issue using Chrome and Firefox on macOS. Luckily on Chrome I can right-click and select 'Reload Frame' which reloads the devtools window and the components are updated as expected. As far as I'm aware Firefox does not have the ability to reload the devtool frame and therefore you must close the devtools window and re-open it.

[garbusbeach]

Same issue, Chrome macOS

[ericcirone]

Same issue, Chrome and macOS

[NickSdot]

Same issue, Chrome and macOS

[chisbug]

Same issue, Edge(124.0.2478.80) and Window10

[y1324]

Same issue，edge 124.0.2478.97 (正式版本) (x86_64) and macOS

[taylordragoo]

I can confirm I'm on 6.6.3 and still having the same issue of the devtools becoming unresponsive.

[c9845]

@Akryum This issue is not resolved. I have 6.6.3 installed and the dev tools does not update on page changes. You have to close Chrome's DevTools and reopen to get Vue DevTools to show the updated list of apps on the page.

[gregveres]

I can also confirm that chrome on windows also leads to DevTools becoming unresponsive with 6.6.3.
Most of the time "reload frame" will work to get it back, but there are times where that doesn't work either.
In those cases, if I close the debugger and re-open the debugger, I often don't get the Vue tab in the debugger. It's like it doesn't recognize that Vue is being used on the page.

When this happens, I have to close the debugger, refresh the browser tab, reload the debugger. Most of the time that works, but when it doesn't work, I have to close the tab and open another tab to get working again.

[mmirandola-igw]

Using this (https://devtools.vuejs.org/) from today just saved my life. It's sponsored by Evan You so it's seems pretty good.

[blueskies79]

Can confirm this is an issue with 6.6.3 also on Linux Mint with Chrome Version 130.0.6723.69.