Live template inspector

[maxnorth]

What problem does this feature solve?

While inspecting a component, it would be very helpful to be able to see the template associated to the component, especially if it is enriched with some interactive inspection and highlighting features that help you understand how it is currently rendering. The idea is inspired by how debugging code works, where you can hover over variables to see their current state and step through the code to understand how the data is driving the logic flow, except this concept applied to the templates shouldn't require pausing execution, it should just be usable live.

Some useful potential capabilities:

• Indicate which parts of template are not rendering due to v-if or v-show (perhaps show in faded text)
• Inspect how embedded expressions are evaluating, whether in {{brackets}} or in an attribute binding
• Set a breakpoint on component event handlers
• Click an element shown in the template and get a reference to the associated DOM element

What does the proposed API look like?

Not sure exactly where this would best be located in the UI from a UX perspective, but I would expect it to be accessible when you have selected a component in the component tree

[maxnorth]

Eager to know if there's interest in this from the maintainers, I'd enjoy helping develop it if there is.