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

GregorSondermeier commented 1 year ago

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 commented 1 year ago

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

oliver-mentel commented 1 year ago

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 commented 1 year ago

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 commented 12 months ago

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 commented 11 months ago

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

open devtools.
Go to Vue tab.
Close dev tools.
Open devtools.
Go to vue tab.
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 commented 11 months ago

any solutions yet ?

daniandl commented 11 months ago

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 commented 10 months ago

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 commented 10 months ago

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 commented 9 months ago

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 commented 9 months ago

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

shezhangzhang commented 9 months ago

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

oliver-mentel commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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

borisovdev commented 9 months ago

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:

Download the 6.4.5 release (https://github.com/vuejs/devtools/releases/tag/v6.4.5)
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 commented 9 months ago

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:

Download the 6.4.5 release (https://github.com/vuejs/devtools/releases/tag/v6.4.5)

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

VanillaTank commented 7 months ago

the same, Chrome, Windows

palashmon commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

v6.6.1 reproduces

lxmfly123 commented 7 months ago

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 commented 7 months ago

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

fheckl commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 3 months ago

v6.6.3 reproduces.

marfrelen commented 2 months ago

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 commented 2 months ago

makes it a pain to use Vue

Luiz-Soft commented 1 month ago

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

vuejs / devtools-v6