vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.69k stars 4.14k forks source link

Objects in props or reactive state treated as Unknown Component if they contain a `render: Function` property #1944

Open rydash opened 2 years ago

rydash commented 2 years ago

Version

6.2.1

Browser and OS info

Chrome 105.0.5195.127 / Windows 10 21H2

Steps to reproduce

  1. Create a simple Vue project with create-vite or another mechanism you prefer.
  2. Create a Vue component so that its props, data, or reactive state contains at least one object where at least one key is named render and its value is a Function with any body. An example with the composition API: const renderObj = ref({ render: () => { } })
  3. Launch the webpage containing your Vue component and open the Vue DevTools.
  4. Find your component and its properties in the Inspector view.
  5. Notice the object you defined shows a value of "Unknown Component" even though its real value is not a component at all.

What is expected?

Vue DevTools accurately identifies when a Vue component has been passed as props or defined in a component's reactive state.

What is actually happening?

Vue DevTools assume that a render: Function value within an object in a component's props or reactive state means that entire object is an unknown or unregistered Vue component.


This happens with both the Composition API and the Legacy API with Vue 3.

I understand how the current ducktyping attempts to identify Vue components, because all components would have that render function! But I wonder if there's a way to make the ducktyping more precise. I encountered this while adding a KontraJS Sprite as component data, which under the covers is an object containing a render function... so the Vue DevTools were unable to show me any other information about that Sprite unless I, like, console.log'd it. Not great!

alvarosabu commented 1 year ago

Yup, I am experimenting the same trying to see the state of a Vue 3D lib I'm building. Would be nice actually to see the properties of the WebGLRenderer

Screenshot 2022-12-13 at 09 15 08

There is a PR https://github.com/vuejs/devtools/pull/1159 with a potential fix but is looking for Reviewers, @Akryum do you think this could be somehow prioritized to get a review, it would be super helpful. Thanks