devtools
devtools copied to clipboard
[BUG] Dev tools fails to inspect component containing objects with "_isVue", throws errors and locks up devtools
Version
6.1.4
Browser and OS info
Chrome 99.0.4844.74
Steps to reproduce
- Create a Vue 2 component
- Create a class that includes a
public _isVue = true;
- Instantiate this class in your component assigning it to a data field
- Go to the inspector, and click on your component in the component tree
- Observe infinite loading
- Observe console errors
What is expected?
That the component is inspected.
What is actually happening?
The inspector will infinitely load for that component, and the following errors show up in the console:
backend.js:7028 [Bridge] Error in listener for event b:component:selected-data with args: ['app-1:308'] wrappedListener @ backend.js:7028 await in wrappedListener (async) emit @ backend.js:10542 _emit @ backend.js:7098 (anonymous) @ backend.js:7011 (anonymous) @ backend.js:7011 listener @ backend.js:14172 postMessage (async) n @ proxy.js:1
backend.js:7029 TypeError: Cannot read properties of undefined (reading 'props') at processProps (backend.js:3982:35) at getInstanceState (backend.js:3925:10) at Object.getCustomInstanceDetails (backend.js:3933:17) at getCustomInstanceDetails (backend.js:6908:36) at backend.js:8356:82 at EncodeCache.cache (backend.js:8252:22) at Object.replacer (backend.js:8356:26) at encode (backend.js:8006:38) at encode (backend.js:8017:19) at encode (backend.js:8007:21)
This is a workaround prevent Vue making an object contained in a component reactive when it doesn't need to be, or when such reactivity causes crippling performance concerns, such as with Babylon.js. It works as expected.
This was not a problem before the dev tools update.
I'm seeing the same thing. Was there ever a workaround or solution for this issue?
我在运行一个使用了vue的简单的html文件时尝试使用了devtool并产生了同样的问题,而并非是包含了_isVue的组件,所以是完全没有解决方法是吗
Yeah, still an issue, when components like this are encountered the dev tools just break & lock up now 😬
The same happenes with dynamic <component>
in Nuxt.js.
Is there any solution?