Chrome effectively freezes when closing its dev tools and Vue Devtools is installed

[GregorSondermeier]

Vue devtools version

6.5.0

Link to minimal reproduction

https://sfc.vuejs.org/

Steps to reproduce & screenshots

• Open the SFC Playground
• Press F12 to open Chrome Devtools
• Inside the Chrome Devtools, open the Vue panel
• Make sure that Vue is detected
• Press F12 again to close Chrome Devtools

What is expected?

• I can continue to use Chrome like usual

What is actually happening?

• CPU and Memory Usage increases immensely after closing the Chrome Devtools
• As a result Chrome becomes unresponsive

System Info

Ubuntu Linux 22.04
Kernel 6.2.0-32-generic
Chrome 117.0.5938.88 (Official Build) (64-Bit)
Vue Devtools 6.5.0

Any additional comments?

This problem came up today while developing on my company's Vue powered web apps. One colleague can reproduce this issue while another one can't. I could not find this issue reported yet, hence me creating it now.

Does anyone else have this issue?

For now I need to uninstall Vue Devtools from Chrome and use Firefox instead to debug my Vue apps, because over there it works as expected.

[dskyyy]

Confirmed with Chrome and even Firefox on MacOS/Windows 11.

[oliver-mentel]

I'm having the exact same issue. Doesn't matter if closing the devtools in Edge or Chrome, both show the exact same behaviour as described by the reporter. Any help on this?

[oliver-mentel]

Because this topic has not yet been addressed by the developers, I have found a rather primitive but temporary solution: refreshing the page whenever the DevTools are closed. I have discovered that refreshing the page "resets" the memory leak. To automate this reload event, I have created a simple Chrome extension (currently under review) that does this for me, but only on specific websites (e.g., localhost).

Extension as zip file:
refresher.zip

[royemosby]

Seeing same problem in Brave on my Mac:

MacOS version: 14.1.1 (23B81)
Brave version: 1.60.118 Chromium: 119.0.6045.163 (Official Build) (arm64)
Vue devtools version: 6.5.1

[mve]

Having this issue also. For me I do have to open and close the dev tools at least 2 times.

1. open devtools.

2. Go to Vue tab.

3. Close dev tools.

4. Open devtools.

5. Go to vue tab.

6. Close dev tools.

Memory will then increase by about 100 mb every 1-2 seconds, and will not go down.
im using Brave browser on Windows 10.
Extension version 6.5.1
Brave version 1.60.125

[turtle78622]

any solutions yet ?

[daniandl]

Same, vue devtools are unusable for me as of a few weeks ago. Switching routes takes 3 seconds of freeze.
EDIT: I use Vuetify and noticed that v-img causes slowdowns when used with devtools.

[Shuyinsama]

Experiencing the same with devtools 6.5.1 and latest chrome Version 120.0.6099.216 (Official Build) (x86_64)
Using firefox on the other hand works perfectly fine for me with 6.5.1 extension and firefox at 121.0.1

I am running the latest MacOS too

[turtle78622]

What I observe that it'll only freezes browser only if we close inspect tool window. If I not closing an inspect then vue tool works fines but after closing browser inspect it'll freezes so keep open your inspect tool

[borisovdev]

Affirmative.
In my case everything works fine until the hot reload is triggered. As soon as I change something in my code, it updates and I reload the page, the browser freezes intentionally.
I noticed in the htop output that one of the cores is 100% loaded at that point
Developers, please give feedback on this problem! Using chrome for vue development has become extremely difficult (if I need vue inspector, I have to open Firefox...).

Fedora 38
Kernel 6.5.5-200.fc38.x86_64
Version 121.0.6167.85 (Official Build) (64-bit)
Vue Devtools 6.5.1
Gnome 44.8 with Wayland

[shezhangzhang]

Can not use it... if you open it, it crashes chrome...

[shezhangzhang]

Do vue developers never use it? Why can such a serious problem exist for so long?