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?

[oliver-mentel]

any solutions yet ?

I created this basic chrome extension tool that gives a temporary solution:
https://chromewebstore.google.com/detail/devtools-close-refresher/nfcfibfdokdooefjclehlhgojpmchlhp?hl=en-GB&authuser=0&pli=1

[altescape]

I'm seeing a similar thing using Chrome inspector and Vue dev tools the memory usage would increase really quickly, it's unusable for me at the moment. Chrome task manager reported the tab was using up to 8gb and then tab would crash.

Refreshing the tab didn't work very well for me either.

I've disabled Vue dev tools extension and memory usage is normal.

Ubuntu Linux 22.04
Chrome 121.0.6167.184
Vue Devtools 6.6.1

Project is using Vue3 with Vite 5.1.1

[parsajiravand]

I have this issue on mac os Version 14.1.1 .
When vue devtools is open Ram usuage is increase until freezing chrome.

[borisovdev]

Maybe this will help someone.
Recently devtools has been updated to 6.6.1, maybe the problem has been fixed. Unfortunately I didn't have enough time to verify it
If you are still getting the problem you can try the following:

1. Download the 6.4.5 release (https://github.com/vuejs/devtools/releases/tag/v6.4.5)
2. Build and install the extension manually

I have this bug clearly disappeared in the 6.4.5 release.

P.S. I would like to say thanks to the developers for not abandoning this project

[parsajiravand]

Maybe this will help someone. Recently devtools has been updated to 6.6.1, maybe the problem has been fixed. Unfortunately I didn't have enough time to verify it If you are still getting the problem you can try the following:

1. Download the 6.4.5 release (https://github.com/vuejs/devtools/releases/tag/v6.4.5)
2. Build and install the extension manually

I have this bug clearly disappeared in the 6.4.5 release.

P.S. I would like to say thanks to the developers for not abandoning this project

I downloaded this version but when i want to add in load unpacked extension got this error :

Failed to load extension
File
~/Downloads/devtools-6.4.5
Error
Manifest file is missing or unreadable
Could not load manifest.

[altescape]

I failed to get older versions working, one work-around that's working for me is the stand-alone app.

That hasn't shown any problems yet - seems speedy.

[vallemar]

I don't know if it's when it closes or not, but I have the same problem, Chrome constantly freezes on Mac. This makes for a horrible experience, I have to force quit all of Chrome every 5 minutes

[PetrKaterinak]

6.6.1 has still same memory leak issue. Edge freezes and memory starts to increase by Gigabytes

[VanillaTank]

the same, Chrome, Windows

[palashmon]

Chrome keeps on freezing after opening Vue Devtools for some time. I have to check Vuex store values like this for now:

Array.from(document.querySelectorAll('*')).find(e => e.__vue__).__vue__.$store.state

[basuneko]

Also experiencing something similar. Immediately after opening vue devtools, the memory usage would start quickly going up to 20+ gb until chrome would just crash. I only got a 20-30 second window to use the devtools.

What seems to have helped is disabling React Devtools, Angular Devtools and other extensions.

[lxmfly123]

v6.6.1 reproduces

[lxmfly123]

Also experiencing something similar. Immediately after opening vue devtools, the memory usage would start quickly going up to 20+ gb until chrome would just crash. I only got a 20-30 second window to use the devtools.

What seems to have helped is disabling React Devtools, Angular Devtools and other extensions.

I disabled Angular devtools and everything gets ok.

[parsajiravand]

Thanks a lot my friend, after 6 month finally my vue devtools is working.
@lxmfly123

[fheckl]

Also experiencing something similar. Immediately after opening vue devtools, the memory usage would start quickly going up to 20+ gb until chrome would just crash. I only got a 20-30 second window to use the devtools.
What seems to have helped is disabling React Devtools, Angular Devtools and other extensions.

I disabled Angular devtools and everything gets ok.

I can confirm that this also solves the problem for me.
So it seems to be an interaction problem between Vue DevTools and Angular DevTools?

[oskarnrk]

I don't have Angular devtools installed and Vue devtools still makes Chrome devtools crash. It happens a lot with 6.6.* version, less times with version 6.5.1 (I tried downgrading to that version).

[turtle78622]

@oskarnrk Try to use this extension it's much stable than newer one but sometime it also lags but not that frequent
https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp

[nocpp]

v6.6.3 reproduces.

[marfrelen]

Is there any update?
This issue is open for nearly a year and the bug still exists :/

As a Workaround I use the dev tools via Firefox. Here the vue dev tools are working.

[fabswt]

makes it a pain to use Vue

[Luiz-Soft]

I can confirm that deactivating the angular extension solved the problem for me.