Vue-devtools: Very low perfomance / High memory usage since 5.0

[Uzere]

Version

5.1.0

Browser and OS info

FF66, Win 10 or macOS 10.14

Steps to reproduce

open Vue tab in devtools

What is expected?

at least 4.1.5-like perfomance

What is actually happening?

browser freezes for up to minute and eats all ram available (3-7 Gb, sometimes more) before even showing components list
toggling "autoload Vuex state" and "new Vuex backend" does not change this

---

Also I don't understand why #952 is closed. Loading new state takes lot of time in new version, and periodically-happening mutations in app make it unusable
4.1.5 perfomance was ok unless hours of state history recorded

[Akryum]

Performance is an order of magnitude better since 5.0 in my experience. Please provide a reproduction.

[ERPedersen]

I'm also getting very poor performance, and the Vuex state fails to load / freezes constantly.

[ERPedersen]

Reverting to 4.1.5 fixed all my issues.

[scp-nm]

Reverting to 4.1.5 fixed all my issues.

@ERPedersen - how did you manage to revert?

[ERPedersen]

To revert to a different version in Chrome, follow these steps:

1. Remove the current extension
2. Download your desired version from crx.dam.io
3. Extract the folder from the .zip/.tar.gz file
4. Navigate to chrome://extensions
5. Enable Developer mode in the top right corner of the page
6. Click Load unpacked
7. Select the extracted folder

The extension should now be installed and visible among your other extensions.

[scp-nm]

@ERPedersen - thanks, found out that you can also simply drag the downloaded zip file onto the Extension page in Chrome, and it'll get installed.

[senritsu]

Can confirm this is a major issue. With a large-ish application i cannot even open the devtools anymore in Chrome, as it crashes with an out of memory exception instantly while starting up. From the trace when i manually break i assume it somehow replays all mutations and stringifies the state about a million times until memory is exhausted and the browser suicides.

[dunkfordyce]

Also getting terrible performance. Chrome was using 100% cpu and half the time I couldnt do anything with dev tools. Reverted to 4.1.5 and everything works fine.

[xuliangzhan]

I reverted it to 4.1.5, 5.1.0 very unstable.

[senritsu]

For colleagues of mine 4.1.5 also works fairly well, and specifically does not have this issue.

[grimasod]

Same issue here.
Alternative installation method, using this repository:

1. Remove the current extension
2. Download from https://github.com/vuejs/vue-devtools/releases/tag/v4.1.5 & unzip
3. In the directory vue-devtools-4.1.5 run npm install (Or yarn)
4. Then run npm run build (Or yarn build)
5. Drag the folder vue-devtools-4.1.5/shells/chrome into Chrome Extensions

[luismaldonadov]

I'm experiencing high ram usage, sometimes all my ram is used and swap is started to fill up, one thing to notice that this only happens in firefox, chrome still uses quite a chunk of ram but not all of it. If I can provide a log or something to debug i will be happy to.

[emyhrer]

We are facing the same issue as well in a large/complex application.

In anything above 4.1.5, devtools does not even initialize components or vuex store before crashing. We have been fine using 4.1.5 so far, but are starting to miss out on features such as editing vuex store state for example.

[JoshPJackson]

Same issues here. Devtools would cause my browser to become unresponsive

[LinusBorg]

Is anyone in this thread able / allowed to share a project with which this issue arises?

@Akryum already stated that he hasn't found such issues, and since this has "only" about a dozen commenters that seem affected within a 6 week-period, It seems that it doesn't affect just every kind of larger project.

In short: We need a reproduction

We are sorry that you all have this same issue, but just saying so in a new comment will not do anything to improve the situation, unfortunately.

Sidenote: it's common on github to use a "thumbs up" on the OP to express "me too"

[luismaldonadov]

I can share it, but it is not public. Can we arrange something?

[Akryum]

@luismaldonadov Yes, if I can run your project to debug the issue, it doesn't have to be public.

[luismaldonadov]

Feel free to email me to arrange it. Glad to help

[sainathsr]

@Akryum Been facing the same issue . Ours is a medium sized enterprise app with lots of data in the store ,but no very frequent (like once every 5 sec ) kinda mutations . Keep getting out of memory crash from stringify called from vuex hooks . Reverted to dev tools 4.1.5 seems to work fine .
we are on the latest version of vue. Is there any problem with using a significantly older version of dev tools ?

[gjactat]

I've set up a quick Codepen that :

• builds a large JSON object
• stores it in a Vuex instance
• creates a Vue instance

This page loads in no time in an "incognito" Chrome instance (no plugins) but loads in 10 seconds when you have the Vue Devtools plugin installed (no matter if the Chrome Devtools are opened or not).
As noticed before, the same page loads in no time with devtools v4.1.5.

• Codepen Url : https://codepen.io/gjactat/pen/rXVWOv

• Performance tab snapshot :

The "devtoolPlugin" subtree pretty much maps the large object graph.

[senritsu]

The codepen doesn't open for me (403, due to debug link?) but i can at least say that for the most jarring issues i have (browser completely freezing to to mutation replay, #1003) it only happens if the devtools are open. Closed devtools are no problem at all.

[Klieger]

Someone has published a new vuedevtools clone on chrome that fixed the
problem for me.

On Fri, Jul 26, 2019, 12:39 PM Christiaan Maks [e-mail]
wrote:

Same problem here. After a short while (5 or 10 minutes) performance of
the Firefox tab I'm working in is really bad and according to the Windows
task manager Firefox is using ~10% CPU and 6gb+ memory.

Windows 10
Firefox 68
Devtools 5.1.1

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-devtools/issues/997?email_source=notifications&email_token=AA47YZCYK4Q4CYQ6SZ7Y2F3QBNAGRA5CNFSM4HMIVT32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD25MUXI#issuecomment-515557981,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA47YZFIN7FIWNCJPYPCASLQBNAGRANCNFSM4HMIVT3Q
.

[bmarkovic]

Also having memory issues. I'm pretty sure that it's easily reproducable as I'm having the issue on two apps:

• one polls data as JSON tree from a backend every 5 seconds, the data is pretty nested and is stored as such in Vuex, RAM usage (observed on the Chrome Devtools Memory tab):
  
  
  
  • With Vue Devtools it's constantly rising until there is a debugger exception pending out of memory crash at near 3GB.
  
  
  • With Vue Devtools disabled the usage is stable at around 50MB, peaking to 130MB when on a sub-page that charts using a well known memory hungry charting library.
  
  
• other is a frontend to a CRUD that loads a sizeable chunk of the user's state from backend after the load and stores it in Vuex (and then keeps syncing data with backend as user works).
  
  
  
  • With Vue Devtools - again apparently leaking but not as much as the app above, but almost every action or mutation call increases the memory load a bit
  
  
  • Without Devtools, again pinned at around 50MB
  
  

I'm afraid that's about as much as I can reveal given the nature of the apps I'm working on.

I'd also like to note that memory issues are present regardless of whether I've interacted with Vue Devtools or not.

[EzeFSpa]

Also reverted to 4.1.5 as @ERPedersen suggested and its solved all my issues. Im working with a large proyect with tons of mutations. But in another smaller proyect with a smaller vuex i don´t have this memory issues.

[haydenbbickerton]

Please feel free to email me too! [email protected] for a reproducible site, consistently swells the devtools to 6GB+.

[dgattey]

Feel free to email me, [email protected] - our project is huge and built with some packages that need to be upgraded/optimized, but vue devtools is 100% consistently unusable for us.

[Akryum]

The situation should be much better with v5.3.1

[ERPedersen]

Appreciate the great work

[Klieger]

Thank you, Guillaume!

On Wed, Oct 30, 2019 at 11:53 PM Emil Rosenius Pedersen <
[email protected]> wrote:

Appreciate the great work

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-devtools/issues/997?email_source=notifications&email_token=AA47YZC23GIE3QRYQJTYQXLQRJ6H7A5CNFSM4HMIVT32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECWXOSA#issuecomment-548239176,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AA47YZGOPAF2WR46CEXYQOLQRJ6H7ANCNFSM4HMIVT3Q
.

[EzeFSpa]

I tried this version yesterday and I must say GREAT WORK! I was able to use devtools tools again (I missed that tool a lot).
One small thing: when you press the "load state" button but it never loads, maybe because my store is too big?
Again, thank you very much for the great work.

[senritsu]

I can also report that for now it seems like vue-devtools are usable again in our project. The last version seems to fix a whole bunch of related performance issues we kept having.

• Opening the devtools after the app has already loaded (and done a ton of mutations to a huge state) doesn't crash the devtools anymore
• Performance while having mutation recording on seems to be good now, no exponential memory usage and crashes all day yesterday (although i still had sporadic out of memory crashes on friday on 5.3.2)
• From what it looked like the "Pause" button for mutation recording now works correctly even when reloading the page, though i haven't tested this a lot since i wanted to see if i can just keep recording enabled

Most of my coworkers had resorted to either 4.x or not using vue devtools at all because of the massive issues, so this is a very welcome change.

[spaceemotion]

This continues to be a problem with 5.3.3 for us. The tab increases up to 8gbs of ram, until chrome stops it.

Loading the devtools...

• on first page load is not a problem and is almost instantaneous
• on a further page with hundreds of objects crashes it.

The situation changes just a bit when using the new vuex backend: It still takes time (and a small jump in memory usage), but is manageable. However, the interface gets quite laggy when trying to look at the mutations (if it's not already using a virtualized list, that may be a possible fix?).

[plinionaves]

Unfortunately, the problem continues, I have a big project and I can't use Devtools...

[scp-nm]

I'd like to add to this conversation - we have a fairly large SaaS platform with the frontend running Vue (with Vuex). When using Google Chrome (Version 86.0.4240.198) on my Macbook Pro Vue Devtools will more often than not crash. However, I found that using Firefox (Developer Edition - Version 83.0b10) Vue Devtools loads within a couple of seconds, and I've not had it crash. If anyone is experiencing issues with Chrome it may be worth trying Firefox until the issues can be resolved.