Add browser devtools experience for Blazor

[captainsafia]

Dupe of #5517.

Summarization

I would like a browser-based experience in Blazor that lets me examine my components, their state and parameters, and their scoped styles.

Applicable Scenarios

Here are some scenarios where this would be helpful to me as a developer:

• I notice that a component is rendering the wrong text. I can right click to inspect it and see that this is because a parameter is set to an incorrect value.
• I want to see what styles I've applied to a component. I can right click on the component and see the styles in the browser's elements app and tweak them before adding them to my app.
• I want to see what happens when I change the parameter to a component. I can test this out inside Blazor dev tools.

Examples

Right click to inspect an element in Developer Tools

View and edit the component hierarchy in Blazor DevTools

[TanayParikh]

Closed #13310 & #5517 as duplicates of this issue. They have similar asks for Blazor browser dev tooling via extension.

Summary:

Other frameworks like Vue and Redux have some pretty nice dev tools browser extensions.

We should consider having a Blazor dev tools browser extension. Potential scenarios:
Inspect components
Update components with live reloading

---

To make it easier to inspect and debug rendered HTML from Razor components, it would be very nice, if somebody would create a developer tool extension for Chrome/Edge/Firefox (I believe they are using the same extension model now, so one would work everywhere), that removes the annoying "Blazor comments" () from the "Elements" tab.

[stsrki]

@captainsafia There is a project FindRazorSourceFile, that might be something you were looking for https://github.com/jsakamoto/FindRazorSourceFile

[dustinptg]

Hi guys, is there any update regarding this issue?

[irowbin]

@TanayParikh Are we reach to RC or Preview at least? Thanks.

[danroth27]

Moving back to dotnet/aspnetcore since this isn't related to Razor tooling.

@vijayrkn @sayedihashimi Should this go to the VS web tools team?

[drew-fierst]

Hi folks, is there any movement on this request? I would like to add all the weight I can to this request. It would be a HUGELY helpful feature, even if we could only see the component hierarchy, select a component and view its parameters/data.

[danroth27]

Hi folks, is there any movement on this request? I would like to add all the weight I can to this request. It would be a HUGELY helpful feature, even if we could only see the component hierarchy, select a component and view its parameters/data.

We don't have any plans for this in the .NET 8 timeframe. If someone in the community wants to build an awesome Blazor dev tools browser extension, go for it! 🦸

[rileyseaburg-efc]

Why exactly is there no plan for this feature?

Does it require too much development time?

This is a really useful concept, and it would help blazor be more widely adopted.

I recommend reconsidering this.

[danroth27]

Why exactly is there no plan for this feature?

Does it require too much development time?

This is a really useful concept, and it would help blazor be more widely adopted.

I recommend reconsidering this.

It's simply a matter of time and resources. The core Blazor team is still heavily focused on the core capabilities of the Blazor framework. This also seems like an area of innovation that the community could engage on independently. Is this something you'd be interested in organizing?

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.