Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
GregorSondermeier opened this issue Sep 18, 2023 · 26 comments · May be fixed by #2148
Open

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

GregorSondermeier opened this issue Sep 18, 2023 · 26 comments · May be fixed by #2148

Comments

@GregorSondermeier
Copy link

GregorSondermeier commented Sep 18, 2023

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
Copy link

dskyyy commented Oct 10, 2023

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

@oliver-mentel
Copy link

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
Copy link

oliver-mentel commented Oct 30, 2023

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
Copy link

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
Copy link

mve commented Nov 30, 2023

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
Copy link

any solutions yet ?

@daniandl
Copy link

daniandl commented Dec 21, 2023

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@shezhangzhang
Copy link

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

@oliver-mentel
Copy link

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
Copy link

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
Copy link

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

@borisovdev
Copy link

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
Copy link

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
Copy link

altescape commented Feb 27, 2024

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
Copy link

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
Copy link

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

@tiagoroldao tiagoroldao linked a pull request Mar 21, 2024 that will close this issue
8 tasks
@VanillaTank
Copy link

the same, Chrome, Windows

@palashmon
Copy link

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
Copy link

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
Copy link

v6.6.1 reproduces

@lxmfly123
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.