Opening Developer tools makes the page response slow #1875

Nidhishpp · 2022-06-01T07:27:04Z

Version

6.1.4

Browser and OS info

Brave 1.39.111/ Windows 11

Steps to reproduce

Open a vue project in browser.
Open Vue Dev Tools.
Try to use the application.

What is expected?

Work normally

What is actually happening?

Page response gets really slow and gets stuck sometimes.

liruisen · 2022-06-07T09:59:22Z

I have the same problem

SherinBloemendaal · 2022-08-04T21:47:31Z

We have same problem. Vue devtools is extremely slow. Also Vue performance itself is slowing down, rendering components take about 1 sec wich is insane because without devtools its instant.

The performance profiler is worth nothing, it says a component render takes 1400MS but without the devtools its instant so the devtools are the cause of slowing it down.

rvanbaalen · 2022-08-12T19:58:44Z

I installed the standalone vue dev tools (electron app) and now my browser stopped lagging.

Would prefer to use it in browser but for the meantime, this will work.

qq326943819 · 2022-09-05T01:08:57Z

The same.I think Devtools may affect the browser's main process

TheNoim · 2022-09-14T08:21:58Z

Do you have SuperAgent or any similar addons installed? For me it was only slow with SuperAgent installed.

M4thG33k · 2022-09-23T15:56:50Z

I'm having the same issue with version 6.2.1 of the Chrome browser extension on Vivaldi 5.2.2623.48/Pop!_OS 22.04.

When dev tools has not been activated (either the developer console is closed or the Vue tab has not been opened with the extension added), everything runs smoothly and quickly. When the dev tools has been activated, I've noticed a significant slowdown/delay when rendering components - especially when depending on data from composables such as Pinia stores. (I have disabled the Pinia plugin to see if that was the issue, but I noticed the same experience with and without that plugin enabled.)

This issue is making it very painful to try to debug issues with my application.

I tried to use the standalone version, as rvanbaalen mentioned above, but it seems to reset its connection almost immediately after page load and/or a new route is viewed, meaning I can't look at any components, plugins, etc. and therefore rendering it useless to me.

Edit: Also tested on Chrome Version 104.0.5112.79 to make sure it wasn't a Vivaldi issue and had the same results. Oddly enough, though, testing on Firefox Version 104.0.2 doesn't have the same issue. So this may be a chromium-based issue, since Chrome, Firefox, and Brave (mentioned by Nidhishpp in the original post) are all chromium-based.

related: #1875

Akryum · 2022-09-26T11:29:15Z

Can you notice an improvement with v6.3.0?

pzgz · 2022-10-01T00:09:26Z

sign, very painful with the performance, sometime I am just afraid of opening the vue-devtool tab, since it will slowdown the development process a lot. But it's very hard to debug vue app if there's no vue-devtool.

Sometime I have to rely on console.log to debug vue app, instead of using vue-devtools...

M4thG33k · 2022-10-05T12:22:49Z

@Akryum There may be a small improvement in v6.3.0 and later (I just tested with v6.4.2), but there is still significant lag/slowdown once dev tools is active.

iingles · 2022-10-06T21:23:37Z

I've been having the same problem for the last year or so. It's gotten so bad that I just uninstalled it and I'm attempting to finish my app without it. Hopefully the issue is resolved soon.

Akryum · 2022-10-06T23:55:12Z

Did you try turning 'Performance monitoring' and 'Update tracking' off?

iingles · 2022-10-07T19:02:44Z

Did you try turning 'Performance monitoring' and 'Update tracking' off?

I did, and I'm still having issues.

Akryum · 2022-10-08T08:42:05Z

I create a guide here to share devtools performance profiles so we might get a better understanding of the issues you are experiencing.

freedomlang · 2022-10-26T09:17:04Z

@Akryum Alse have same performance issue in firefox. Here is my firefox profile, hope it could help.

imaverickk · 2022-11-16T07:35:54Z

@Akryum Devtools seems to cause components to unmount slowly, and the lag becomes especially noticeable when unmounting a large number of components at once.

Turning off ’Performance monitoring‘ and ’Update tracking‘ does not fix it.

A simple test

Create a new project using vite : pnpm create vite test-app --template vue

Modify App.vue :

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
let count = ref(5000)

function toggle(){
  count.value = count.value===1 ? 5000 : 1
}
</script>

<template>
  <div @click="toggle">Toggle</div>
  <HelloWorld :msg="String(index)" v-for="index of count" />
</template>

Start a performance recording
Click 'Toogle'

The performance of creating components is also degraded, but within acceptable limits, while the performance degradation of unmount is very exaggerated, the unmount time has increased several hundred times.

This is indeed an extreme example, but in one of my projects where a page contained a Table(naive-ui) with a lot of data, leaving the page lagged for almost 30 seconds when devtools was enabled, and when devtools was disabled, there was no lag.

Akryum · 2022-11-16T08:57:37Z

@imaverickk could you post a performance profile like explained in this guide? 🙏
https://devtools.vuejs.org/guide/devtools-perf.html

Related to https://github.com/vuejs/devtools/issues/1875#issuecomment-1316514006

yangfan-coder · 2022-12-30T08:43:44Z

Have you solved the problem? I have the same problem

iingles · 2022-12-30T15:24:56Z

No. I just don't use the devtools unless I have to.

…

On Fri, Dec 30, 2022, 01:43 杨老汉儿 ***@***.***> wrote: Have you solved the problem? I have the same problem — Reply to this email directly, view it on GitHub <https://github.com/vuejs/devtools/issues/1875#issuecomment-1367796316>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7GURXXJEXTTHCA22AN3VTWP2OEZANCNFSM5XQC263Q> . You are receiving this because you commented.Message ID: ***@***.***>

atilkan · 2022-12-30T15:45:53Z

No. I just don't use the devtools unless I have to.

Same here. Even if you turn off all performance related settings it still makes page unresponsive. And there has not been any update since these issues started or none solve the issue. This has been going on for months now.

mikimoresi · 2023-02-02T22:17:18Z

I agree, this totally kills the development experience...

It's an urgent issue IMHO, are there news?

iingles · 2023-02-02T22:26:34Z

Not that I know of.

…

On Thu, Feb 2, 2023, 15:17 Michele Moresi ***@***.***> wrote: I agree, this totally kills the development experience... It's an urgent issue IMHO, are there news? — Reply to this email directly, view it on GitHub <https://github.com/vuejs/devtools/issues/1875#issuecomment-1414448622>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7GURS277LSGX322X4QPB3WVQW7XANCNFSM5XQC263Q> . You are receiving this because you commented.Message ID: ***@***.***>

atilkan · 2023-02-03T01:28:08Z

There is a new version. It is a little better but the issue is not fully resolved it seems.

kokoriolll · 2023-03-02T04:58:12Z

I have same problem

alansgonzaga · 2023-07-13T02:39:31Z

I have a list (v-for) of products I run in a Dialog, I was loosing my mind here trying to understand why on my PC it was taking so long to open (>6000 ms patch time), and also I use other computer daily on my job and there it was taking just 0.3sec, something like that. Also sometime on my PC it was rendering fast and I wasn't understand why sometimes take 0.3sec and later >6s. Found it: DEVTOOLS. When Devtools is open it takes more than 6000s to Patch.

When I open the modal with the DEVTOOLS CLOSED 362ms

Refreshing page and trying to load same modal but with DEVTOOLS OPEN 6130ms

seggewiss · 2023-07-13T13:34:45Z

@Akryum I tried to create a performance profile like you described in your guide. But funny enough with the dev setup of the extension our application works fine. With the extension in Chrome directly however the application freezes for several seconds in the same situation. I created a screen recording of this you can check it out here.

ahmed-fawzy99 · 2023-07-22T07:32:02Z

Same problem for me. My component's load time increases massively when I have the devtools open. I thought I introduces code that slows down my application, but closing the devtool stops the problem. Using chrome 114.0.5735.198. & latest Vue Devtools version.

iingles · 2023-10-25T15:55:46Z

I haven't been using Vue devtools at all unless I really need to. I've gone back to the old fashioned way of debugging stuff, which is far less convenient, but at least I can get things done without my browser crashing.

…

On Wed, Oct 25, 2023 at 9:49 AM Azizbek Nayimov ***@***.***> wrote: I read all the comments and came to the conclusion that I should be able to do without dev tools. Is it a mountain? — Reply to this email directly, view it on GitHub <https://github.com/vuejs/devtools/issues/1875#issuecomment-1779575568>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7GURX3H3TN2X5A3SSYYS3YBEYHRAVCNFSM5XQC2632U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZXHE2TONJVGY4A> . You are receiving this because you commented.Message ID: ***@***.***>

arthabus · 2023-10-26T13:28:07Z

Same here. Migrating from vue2 to vue3 and I spent almost an hour trying to figure out why it suddenly started to take almost 2 sec for my dialog to open while it was always instant before.

I started to use devtools performance profiler and surely it showed my components render for almost 2 sec.
So I started to try to optimized it until I closed the devtools.

That was the moment when it all started to work instantly just as before.

I have relatively sophisticated view tree - can it be that rendering all those views in the profiler graph slows everything down?
You can see below that the tree is pretty busy and I can imagine that rendering every tiny child can be time consuming.

sk8killer · 2023-11-03T16:58:53Z

It seems me that i encounter this slowly response when i use destructuring properties from stores with storeToRefs(store).

My app is very fast and no slow response when i don't use const { propertyExample } = storeToRefs(storeRoot) but directly storeRoot.propertyExample. (But we need to use storeToRefs(store) to watch stores properties...)

Also, this problem seems to occur only in dev mode, not in production mode or generate mode (NUXT)

mikimoresi · 2023-11-04T09:00:10Z

It seems me that i encounter this slowly response when i use destructuring properties from stores with storeToRefs(store).

My app is very fast and no slow response when i don't use const { propertyExample } = storeToRefs(storeRoot) but directly storeRoot.propertyExample. (But we need to use storeToRefs(store) to watch stores properties...)

Also, this problem seems to occur only in dev mode, not

It seems me that i encounter this slowly response when i use destructuring properties from stores with storeToRefs(store).

My app is very fast and no slow response when i don't use const { propertyExample } = storeToRefs(storeRoot) but directly storeRoot.propertyExample. (But we need to use storeToRefs(store) to watch stores properties...)

Also, this problem seems to occur only in dev mode, not in production mode or generate mode (NUXT)

If you try to render multiple instances of a component that render long lists of elements, no matter the complexity of the listed elements, no matter if they are binded to the store or just statically hardcoded, vue dev tool will start to slow down everything..

My actual workaround is to set some global debug vars to limit those elements to render a maximum of 6 listed elements, doing this allows me to work pretty decently even with open dev tools....this is the best workaround I could find, and of course I would like to get rid of it...

mikimoresi · 2024-02-22T13:28:24Z

since last version everything seems to work fast and fluid, thank you, great work!

TechAkayy · 2024-02-22T14:01:24Z

Same here, Thanks lot @Akryum 🙂

devCodeHub-star · 2024-02-29T06:39:26Z

Hello @seggewiss and @Akryum
I also have the performance issue in my project when using the vue-devtools chrome extension. I did the dev setup which explained here, everything works fine until I open the chrome-devtools. When ever I try to debug the code with vue-devtools and chrome-devtools everything goes slow.
Is there any workaround to address the issue ?

Thankyou

dysphasia · 2024-05-20T17:04:48Z

Has there be any movement on this? This issue has persisted for a couple years now and it makes devtools completely unusable.

iingles · 2024-05-20T22:27:55Z

I haven't seen any movement on the browser plugin version, but the Vite plugin version that comes along when you install a new Vue 3 project that runs as a browser overlay seems to work really well so far. I was able to install it on an older Vue 3 project as well, it's the "vite-plugin-vue-devtools" package

…

On Mon, May 20, 2024 at 11:05 AM Nicholas Ortenzio ***@***.***> wrote: Has there be any movement on this? This issue has persisted for a couple years now and it makes devtools completely unusable. — Reply to this email directly, view it on GitHub <https://github.com/vuejs/devtools/issues/1875#issuecomment-2120847809>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7GURWANLREKAZEIT7LHPDZDIUMXAVCNFSM5XQC2632U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJSGA4DINZYGA4Q> . You are receiving this because you commented.Message ID: ***@***.***>

dysphasia · 2024-05-20T22:52:32Z

I haven't seen any movement on the browser plugin version, but the Vite plugin version that comes along when you install a new Vue 3 project that runs as a browser overlay seems to work really well so far. I was able to install it on an older Vue 3 project as well, it's the "vite-plugin-vue-devtools" package

I had the same issue with that tool as well. I appreciate the suggestion though.

XStarlink · 2024-05-20T23:14:37Z

Has there be any movement on this? This issue has persisted for a couple years now and it makes devtools completely unusable.

Have you tried these?

https://github.com/vuejs/devtools-next

mikimoresi · 2024-05-21T10:40:40Z

Has there be any movement on this? This issue has persisted for a couple years now and it makes devtools completely unusable.

Have you tried these?

https://github.com/vuejs/devtools-next

wow, this is really awesome.. outstanding job..really!
just tested a bit, i will start to work only on this, i will give my feedbacks but as first look reaction I'm impressed.

XStarlink · 2024-05-21T11:21:15Z

wow, this is really awesome.. outstanding job..really! just tested a bit, i will start to work only on this, i will give my feedbacks but as first look reaction I'm impressed.

Yes, they made an ultra good DX,

These devtools come from the version originally created for Nuxt, but they've been shared with the entire community, Vue, Vite etc.

If you use Nuxt, the Nuxt devtools have even more great time-saving features.

https://devtools.nuxt.com/guide/features

mikimoresi · 2024-05-21T12:03:03Z

wow, this is really awesome.. outstanding job..really! just tested a bit, i will start to work only on this, i will give my feedbacks but as first look reaction I'm impressed.

Yes, they made an ultra good DX,

These devtools come from the version originally created for Nuxt, but they've been shared with the entire community, Vue, Vite etc.

If you use Nuxt, the Nuxt devtools have even more great time-saving features.

https://devtools.nuxt.com/guide/features

No nuxt here :D full custom vertical meta framework, i love maximum flexibility and full control.. anyway many thanks to the Nuxt team...sorry for the off topic..

KaelWD · 2024-07-26T05:22:59Z

v7 isn't any better, now it slows the page down even without opening the vue tab: vuejs/devtools#548

Akryum added a commit that referenced this issue Sep 24, 2022

fix: performance issue in bridge

503b5ae

related: #1875

Akryum added the feat: performance label Sep 24, 2022

Akryum mentioned this issue Sep 24, 2022

when I use devtools with my project， it will be Extremely slow！ #1883

Closed

Akryum referenced this issue Dec 5, 2022

perf(hook): cleanupBuffer performance + auto-cleanup of old events

60aeed2

Related to https://github.com/vuejs/devtools/issues/1875#issuecomment-1316514006

zam157 mentioned this issue May 13, 2023

太卡了，能不能配置关闭某些功能 webfansplz/vite-plugin-vue-devtools#32

Closed

This comment was marked as outdated.

Sign in to view

edison1105 mentioned this issue Sep 25, 2023

Potential memory leak in computed vuejs/core#9233

Closed

Opening Developer tools makes the page response slow #1875

Opening Developer tools makes the page response slow #1875

Comments

Nidhishpp commented Jun 1, 2022

Version

Browser and OS info

Steps to reproduce

What is expected?

What is actually happening?

liruisen commented Jun 7, 2022

SherinBloemendaal commented Aug 4, 2022

rvanbaalen commented Aug 12, 2022

qq326943819 commented Sep 5, 2022

TheNoim commented Sep 14, 2022

M4thG33k commented Sep 23, 2022 • edited Loading

Akryum commented Sep 26, 2022

pzgz commented Oct 1, 2022

M4thG33k commented Oct 5, 2022

iingles commented Oct 6, 2022

Akryum commented Oct 6, 2022

iingles commented Oct 7, 2022

Akryum commented Oct 8, 2022

freedomlang commented Oct 26, 2022 • edited Loading

imaverickk commented Nov 16, 2022 • edited Loading

A simple test

Akryum commented Nov 16, 2022

yangfan-coder commented Dec 30, 2022

iingles commented Dec 30, 2022 via email

atilkan commented Dec 30, 2022 • edited Loading

mikimoresi commented Feb 2, 2023

iingles commented Feb 2, 2023 via email

atilkan commented Feb 3, 2023

kokoriolll commented Mar 2, 2023

alansgonzaga commented Jul 13, 2023 • edited Loading

seggewiss commented Jul 13, 2023

ahmed-fawzy99 commented Jul 22, 2023 • edited Loading

This comment was marked as outdated.

iingles commented Oct 25, 2023 via email

arthabus commented Oct 26, 2023 • edited Loading

sk8killer commented Nov 3, 2023

mikimoresi commented Nov 4, 2023 • edited Loading

mikimoresi commented Feb 22, 2024

TechAkayy commented Feb 22, 2024 • edited Loading

devCodeHub-star commented Feb 29, 2024

dysphasia commented May 20, 2024

iingles commented May 20, 2024 via email

dysphasia commented May 20, 2024 • edited Loading

XStarlink commented May 20, 2024

mikimoresi commented May 21, 2024

XStarlink commented May 21, 2024 • edited Loading

mikimoresi commented May 21, 2024

KaelWD commented Jul 26, 2024

M4thG33k commented Sep 23, 2022 •

edited

Loading

freedomlang commented Oct 26, 2022 •

edited

Loading

imaverickk commented Nov 16, 2022 •

edited

Loading

atilkan commented Dec 30, 2022 •

edited

Loading

alansgonzaga commented Jul 13, 2023 •

edited

Loading

ahmed-fawzy99 commented Jul 22, 2023 •

edited

Loading

arthabus commented Oct 26, 2023 •

edited

Loading

mikimoresi commented Nov 4, 2023 •

edited

Loading

TechAkayy commented Feb 22, 2024 •

edited

Loading

dysphasia commented May 20, 2024 •

edited

Loading

XStarlink commented May 21, 2024 •

edited

Loading