How to distinguish component instances in Vue Devtools

Question

When I look at the state of my application in the chrome vue devtools extension, I see several instances of the same component in a tree view. However, it is impossible to distinguish one instance from another. For example, the screenshot below shows the three <Todo> components. Imagine there are 30 instead. How do I bind an instance name or identifier to my components? It seems silly to click on 30 components to find the one I need.

Answer 1

I had the same idea a couple of months ago.

So I tried it.

My PR was sent: https://github.com/vuejs/vue-devtools/pull/331

It is probably a little early to rely on my decision, as the main team can still give up PR or request other naming conventions.

Until then, you can create your own version of your proposal from your repo: https://github.com/nerdyglasses/vue-devtools/tree/verbose-component-tree

Does it help you?

Best christian