Opening Developer tools makes the page response slow

[Nidhishpp]

Version

6.1.4

Browser and OS info

Brave 1.39.111/ Windows 11

Steps to reproduce

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

What is expected?

Work normally

What is actually happening?

Page response gets really slow and gets stuck sometimes.

[liruisen]

I have the same problem

[SherinBloemendaal]

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]

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]

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

[TheNoim]

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

[M4thG33k]

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.

[Akryum]

Can you notice an improvement with v6.3.0?

[pzgz]

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]

@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]

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]

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

[iingles]

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

I did, and I'm still having issues.

[Akryum]

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

[freedomlang]

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

[imaverickk]

@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]

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

[yangfan-coder]

Have you solved the problem? I have the same problem

[iingles]

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 <#1875 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7GURXXJEXTTHCA22AN3VTWP2OEZANCNFSM5XQC263Q> . You are receiving this because you commented.Message ID: ***@***.***>

[atilkan]

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]

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

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

[iingles]

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 <#1875 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7GURS277LSGX322X4QPB3WVQW7XANCNFSM5XQC263Q> . You are receiving this because you commented.Message ID: ***@***.***>

[atilkan]

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

[kokoriolll]

I have same problem

[alansgonzaga]

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]

@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]

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]

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 <#1875 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7GURX3H3TN2X5A3SSYYS3YBEYHRAVCNFSM5XQC2632U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZXHE2TONJVGY4A> . You are receiving this because you commented.Message ID: ***@***.***>

[arthabus]

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]

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]

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]

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

[TechAkayy]

Same here, Thanks lot @Akryum 🙂

[devCodeHub-star]

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