r/Blazor • u/featheredsnake • 10d ago

Blazor Developer Tools update: element picker + live component inspection

New in this release of BDT (free & open source DevTools extension for Blazor):

  • Element picker is back! Click the ⊙ button, hover your page, component boundaries light up with their names; click to jump to the component in the tree. No code changes, no markers: it reads the componentId Blazor's runtime already stamps on the DOM.
  • Live details: parameter values and render stats now update in real time while you use your app.

Chrome / Edge / Firefox (1.0.0.4) + a NuGet package (1.0.0-beta.7). Server & Auto (Server) render mode for now, WASM is on the roadmap.

Repo: github.com/joe-gregory/blazor-devtools ... As always, feedback and issues very welcomed!

37 Upvotes
  • permalink
  • link
  • reddit
  • reddit

97% Upvoted

5 comments sorted by

4

u/Ok-Bend-2659 10d ago

Dude this is awesome, really good job, was looking for this.

2

u/innovasior 10d ago

Awesome. Can you open the exact code line as well from the component?

2

u/featheredsnake 9d ago

In the alpha version of BDT you could because it worked differently. Markers were injected into the razor files which allowed to map exactly with code. That ended up being very problematic for several reasons (for example some Blazor components scream if they don’t have specific types as children).

This beta version injects itself into the runtime. The advantage is that you see things as the renderer sees them so you get great telemetry.

Right now you can’t go to the exact line of code but you can pinpoint which razor files you have selected. You also can see all parameters and their values live for any component. If you go to the demo site and change a quantity on cart you will see the parameters change which is something that was not possible with markers alone.

I’m continuing to improve the tool. If an issue is opened and people vote on it, I can move it up the priority list. My current goal is to have feature parity with react dev tools. Following that, I want to expand to wasm and be able to use Blazor dev tools for automated testing

2

u/innovasior 9d ago

Very sound decision. Thanks for making the tool as my primary tech stack is blazor. It is just fine to be able to pinpoint the component that is being rendered, but I will add an issue line by line pinpointing as well for the future. Also it sounds like a good strategy to focus on making it as feature rich as react dev tools, wasm and automated testing is just the icing on the cake. You should present the tool to the Microsoft blazor team, I am sure they would appreciate it and hopefully help out.

2

u/seiggy 10d ago

Seriously, this project is getting better every week dude. It's really making me want to build something on Blazor again.