devtools causes app to hang in Chrome 130.0.6723.92

[Tamanna96]

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]

Can you provide a mini repo? 🙏

[peak1216]

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

[webfansplz]

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

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

[Alwayfeels]

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]

same pb

[webfansplz]

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]

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]

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]

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

[webfansplz]

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

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]

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 🙏