Very low perfomance / High memory usage since 5.0

Uzere commented 5 years ago

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 commented 5 years ago

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

ERPedersen commented 5 years ago

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

ERPedersen commented 5 years ago

Reverting to 4.1.5 fixed all my issues.

scp-nm commented 5 years ago

Reverting to 4.1.5 fixed all my issues.

@ERPedersen - how did you manage to revert?

ERPedersen commented 5 years ago

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

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

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

scp-nm commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

I reverted it to 4.1.5, 5.1.0 very unstable.

senritsu commented 5 years ago

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

grimasod commented 5 years ago

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

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

luismaldonadov commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

LinusBorg commented 5 years ago

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 commented 5 years ago

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

Akryum commented 5 years ago

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

luismaldonadov commented 5 years ago

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

sainathsr commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 notifications@github.com 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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Please feel free to email me too! haydenbbickerton@gmail.com for a reproducible site, consistently swells the devtools to 6GB+.

dgattey commented 5 years ago

Feel free to email me, dylan@jumpstart.me - 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 commented 4 years ago

The situation should be much better with v5.3.1

ERPedersen commented 4 years ago

Appreciate the great work

Klieger commented 4 years ago

Thank you, Guillaume!

On Wed, Oct 30, 2019 at 11:53 PM Emil Rosenius Pedersen < notifications@github.com> 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 commented 4 years ago

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

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

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 commented 3 years ago

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

scp-nm commented 3 years ago

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.

vuejs / devtools-v6