u/featheredsnake

New release of BDT (free & open-source DevTools for Blazor):

- Batches view 📊: the profiler now shows one bar per render batch: click any bar to see exactly which components rendered in that batch and what each cost. It's the fastest way to answer "what did that click actually cost me?"

- Tree search 🔍: finally, type to find a component in big trees.

- Framework filter: one click hides Blazor's plumbing (Router, CascadingValue, LayoutView…) so your components float to the top.

- Version display: the panel now shows both the extension and NuGet package versions, and degrades gracefully when they don't match.

Pairs with NuGet 1.0.0-beta.8, which adds exact render-batch boundaries (older package versions still work, boundaries are inferred instead). Try it live at blazordevelopertools.com . the order-builder demo makes batch costs very visible.

Chrome / Edge / Firefox. Repo: github.com/joe-gregory/blazor-devtools

Feedback and issues welcome!

Blazor Developer Tools new extension release 1.0.0-beta.5 (free and open source devtools for Blazor): toggle highlight mode and components flash on the page when they re-render.

You can try it live on blazordevelopertools.com/order-builder. The page has the same product cards twice, plain vs ShouldRender-optimized. Click +1 on a plain card and every plain card flashes (Blazor re-renders all children when the parent's state changes). Do it on the optimized side and only the card you touched lights up.

This is the fastest way to know "which of my components are re-rendering when they shouldn't?".

Chrome / Edge / Firefox + NuGet package. Repo: github.com/joe-gregory/blazor-devtools. Feedback welcome.

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!

Sharing an update on Blazor Developer Tools (free & open source, Apache 2.0): improvements to flamegraph (and other bug fixes).

I had an issue with the flamegraph. Blazor events are measured in milliseconds, so even half a second of silence stretched the axis so much that the actual events shrank to slivers that were hard to navigate.

I took ideas from subway maps: they tell you where you are relative to other points without being true to distances. I wanted something like that, without losing the timing information entirely.

The new default view for the flamegraph is "Sequence". It preserves order with uniform spacing but flags real pauses with "+1.2s" markers so the time information is still there. I think that for us developers, this is the more useful view since you can see where events happen relative to others. But if you need a true scientific view with total numbers you now have 2 options:

- Time (linear) : the real timeline.

- Time (idle collapsed) : same, but long quiet stretches are clipped out and replaced with a ✂ marker showing how much time passed.

There is an update for both the nuget and extension.

I'm currently working on the element picker tool and closing the list of features that React dev tools offers. I'm hoping to deliver a follow up update of those in a week.

GitHub: github.com/joe-gregory/blazor-devtools