How to distinguish between component instances in Vue Devtools

Question

When I look at my application state in Vue's devtools chrome extension, I can see multiple instances of the same component in the tree view. However, there is no way to distinguish one instance from another. For example, in the screenshot below there are three <Todo> components. Imagine instead there are 30. How do I attach some kind of instance name or id to my components? It seems silly to have to click through 30 components to find the one I need.

Answer 1

I had the same idea also a couple of months ago.

So I gave it a try.

My PR has been submitted: https://github.com/vuejs/vue-devtools/pull/331

It's probably a bit early to rely on my solution since the core team could still reject the PR or request other naming conventions.

Until then you can build my proposal version yourself from my repo: https://github.com/nerdyglasses/vue-devtools/tree/verbose-component-tree

Is that helping you?

Best, Christian