Memory leak when closing Firefox Dev Tools

[tobias-kuendig]

Vue devtools version

6.4.5

Link to minimal reproduction

n/a

I am able to reproduce the error with a minimal Vue app:

yarn create vite
-> Vue
-> Typescript

cd <dir>
yarn
yarn dev

Steps to reproduce & screenshots

1. Open Dev Tools on a website with Vue application
2. Go to the "Vue" tab in the dev tools
3. Close Dev Tools

Monitor RAM usage to see the memory leak:

What is expected?

Memory stays constant.

What is actually happening?

Memory usage increases and within a few seconds all memory is used.

System Info

System:
    OS: Linux 6.0 KDE neon 5.26
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 34.02 GB / 62.60 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - /tmp/fnm_multishells/19446_1670227570518/bin/node
    Yarn: 3.2.3 - ~/code/redacted/node_modules/.bin/yarn
    npm: 8.1.2 - /tmp/fnm_multishells/19446_1670227570518/bin/npm
  Browsers:
    Firefox: 107.0.1

Any additional comments?

How can I debug this issue to give you the required information? I am unable to re-open the Dev Tools after closing them for the first time, so I cannot export a memory dump or a profiler recording.

I cannot leave the Dev Tools open since the bug only occurs when closing them.

[psychofisch]

The exact same thing also happens on Windows.

[ThomasWT]

Same on chrome mac with vite + vue 3

[pixelbucket-dev]

I am using a Webpack setup with Vue 3. On Firefox Developer Edition, 111.0b8. Vue Dev Tools is 6.5.0.

The memory consumption skyrockets once I open Vue Dev Tools inside Firefox Dev Tools. The browsers will very soon become unusable afterwards. Sometimes I did not realise what happened, because I was doing something else. Then suddenly Firefox ate all of my 32GB of memory, or what was remaining to use. The same does not happen in Chrome with VDT.

[Dolyka]

The problem is still relevant

[t-bowersox]

I am seeing something similar, but the Dev Tools extension also begins to cause sustained CPU usage >= 100%. I captured a 5-second profile in Firefox's process manager and it looks like these functions may be the culprit:

• Extension "Vue.js devtools" (ID: {5caff8cc-3d2e-4110-a88a-003cc85b3858}): moz-extension://47a39889-b497-4b9c-8195-d7a8ea28bc8f/build/detector.js:1:42537
• Extension "Vue.js devtools" (ID: {5caff8cc-3d2e-4110-a88a-003cc85b3858}): moz-extension://47a39889-b497-4b9c-8195-d7a8ea28bc8f/build/backend.js:14502:18
  • Function name is handshake

I wish there was a better way to share the profiler data, but a screenshot will have to do:

[MetRonnie]

I have a similar issue in Chrome on Windows for a Vite + Vue 3 app where after closing the devtools panel the CPU usage shoots up from <5% to a sustained ~30% roughly equally distributed across all cores.

CPU: Intel i7-8665U, Vue devtools version: 6.5.0

After further testing I've found that if you re-open the Vue devtools, the CPU usage drops down to normal again. But if you close it again it shoots up again and then the memory leak starts

[jifernandezv]

Same issue here: once you close Vue devtools, memory usage increases steadily until all memory is used. The only caveat is that I need to open and close Vue devtools twice in order to reproduce, so:

1. Open Vue devtools
2. Close Vue devtools
3. Open Vue devtools
4. Close Vue devtools

And memory usage begins to skyrocket.

OS: Ubuntu 22.04 Browsers: Mozilla Firefox 115.0.2, Google Chrome 114.0.5735.198 Vue devtools version: 6.5.0

[oliver-mentel]

This issue is still relevant for many users, which makes the DX using Vue Devtools almost useless.

[oliver-mentel]

Might be of interest: https://github.com/vuejs/devtools/issues/2103#issuecomment-1785125872