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