vuejs / devtools

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools.vuejs.org/
MIT License
1.7k stars 122 forks source link

devtools causes app to hang in Chrome 130.0.6723.92 #656

Closed Tamanna96 closed 1 week ago

Tamanna96 commented 3 weeks ago

After Chrome updated to version 130.0.6723.92, the Vue.js devtools causes the application to hang for a minute or 2 wherever a for...of loop is used. After disabling the extension, the code is back to running fast.

Personally, I used the extension is occasionally, so it won't stop development, but it would be nice to get it fixed as it can be handy at times.

webfansplz commented 3 weeks ago

Can you provide a mini repo? 🙏

peak1216 commented 3 weeks ago

开启这个插件调试,Chrome的CPU瞬间暴涨,导致Chrome卡死

webfansplz commented 3 weeks ago

开启这个插件调试,Chrome的CPU瞬间暴涨,导致Chrome卡死

方便提供更多信息吗,比如使用的 DevTools 版本号和 Vue.js 版本以及其他。如果能提供可复现 Demo 是最好的 🙏

Alwayfeels commented 3 weeks ago

I encountered the same problem. After using this plugin, the browser will freeze due to memory corruption.

I tried using vite-plugin-vue-devtools v7.6.2 and v7.5.6, as well as the latest chrome extension. The freeze problem will occur stably. After turning off this plugin, it works fine.

When my browser crashed, chrome devTools stopped at the following line of code in /node_modules/@vue/devtools-shared/dist/index.js function rfdcCircles(opts) { ... const constructorHandlers = /* @__PURE__ */ new Map(); constructorHandlers.set(Date, (o) => new Date(o)); constructorHandlers.set(Map, (o, fn) => new Map(cloneArray(Array.from(o), fn))); constructorHandlers.set(Set, (o, fn) => new Set(cloneArray(Array.from(o), fn))); ... }

I am not sure if this information is useful, but I will continue to try to locate the problem

neopheus commented 2 weeks ago

same pb

webfansplz commented 2 weeks ago

I encountered the same problem. After using this plugin, the browser will freeze due to memory corruption.

I tried using vite-plugin-vue-devtools v7.6.2 and v7.5.6, as well as the latest chrome extension. The freeze problem will occur stably. After turning off this plugin, it works fine.

When my browser crashed, chrome devTools stopped at the following line of code in /node_modules/@vue/devtools-shared/dist/index.js function rfdcCircles(opts) { ... const constructorHandlers = /* @__PURE__ */ new Map(); constructorHandlers.set(Date, (o) => new Date(o)); constructorHandlers.set(Map, (o, fn) => new Map(cloneArray(Array.from(o), fn))); constructorHandlers.set(Set, (o, fn) => new Set(cloneArray(Array.from(o), fn))); ... }

I am not sure if this information is useful, but I will continue to try to locate the problem

Thanks for the detailed information, could you please provide a mini repo or share the app route config? 🙏

teleganov commented 1 week ago

I also have started running into this problem recently with both the chrome extension and the vite plugin. In my case, it freezes the browser when I update a lot of data at once in a reactive Map in a Pinia store.

Here is a repo I made where you can reproduce the issue: https://github.com/teleganov/vue-devtools-pinia-issue

If you disable Pinia in the devtools settings panel, adding thousands of items works fine. When Pinia is enabled, you will see the issue (the vue app will hang)

I believe this is a recent change since I've been using the chrome extension for development for a while now, and have only started seeing this problem as of this week. I'm not sure when my chrome extension updated though.

webfansplz commented 1 week ago

I also have started running into this problem recently with both the chrome extension and the vite plugin. In my case, it freezes the browser when I update a lot of data at once in a reactive Map in a Pinia store.

Here is a repo I made where you can reproduce the issue: https://github.com/teleganov/vue-devtools-pinia-issue

If you disable Pinia in the devtools settings panel, adding thousands of items works fine. When Pinia is enabled, you will see the issue (the vue app will hang)

I believe this is a recent change since I've been using the chrome extension for development for a while now, and have only started seeing this problem as of this week. I'm not sure when my chrome extension updated though.

Thanks for the detailed info, try to fix it in v7.6.4 (chrome extension is pending review).

teleganov commented 1 week ago

@webfansplz I tried pulling 7.6.4 but still having the same issue.

webfansplz commented 1 week ago

@webfansplz I tried pulling 7.6.4 but still having the same issue.

pinia

We can only ensure that there is no issue when the vue devtools panel is not opened (v6 is also). Next we will look for performance optimization in this case.

nielsbom commented 1 week ago

I'm using the Vue devtools from Brave (Version 1.71.123 Chromium: 130.0.6723.116 (Official Build) (arm64)) and 7.6.4 no longer makes the page hang.

For what it's worth: I'm using Vue3, vue-leaflet and Leaflet and rendering about 250 items with GeoJSON geometries in the DOM (through Leaflet).

Thank you for the fix @webfansplz 🙏