Show HN: I Built DevTools for Blazor (Like React DevTools but for .NET)
Show HN (score: 7)Description
The problem: Blazor is Microsoft's frontend framework that lets you write web UIs in C#. It's growing fast but lacks the debugging tools other frameworks have. When your component tree gets complex, you're stuck with Console.WriteLine debugging.
What I built: A browser extension + NuGet package that:
Shows the Razor component tree in your browser Maps DOM elements back to their source components Highlights components on hover Works with both Blazor Server and WASM
How it works: The NuGet package creates shadow copies of your .razor files and injects invisible markers during compilation. These markers survive the Razor→HTML pipeline. The browser extension reads these markers to reconstruct the component tree.
Current status: Beta - it works but has rough edges. Found some bugs when testing on larger production apps that I'm working through. All documented on GitHub.
Technical challenges solved:
Getting markers through the Razor compiler without breaking anything Working around CSS isolation that strips unknown attributes Making it work with both hosting models
It's completely open source:
https://github.com/joe-gregory/blazor-devtools
Demo site where you can try it:
https://blazordevelopertools.com
Would love feedback, especially from anyone building production Blazor apps. What debugging pain points do you have that developer tools could solve?
More from Show
Show HN: Marten – Elegant Go web framework (nothing in the way)
Show HN: Marten – Elegant Go web framework (nothing in the way)
Show HN: I vibecoded an ARM64 operating system that boots on real hardware
Show HN: I vibecoded an ARM64 operating system that boots on real hardware VibeOS is a retro operating system that boots on qemu and Pi Zero 2W. I built this with Claude code in about 4 weeks.
Show HN: Seapie – a Python debugger where breakpoints drop into a REPL
Show HN: Seapie – a Python debugger where breakpoints drop into a REPL
Show HN: Memory Graph – Interactive Python execution and memory visualizer
Show HN: Memory Graph – Interactive Python execution and memory visualizer Hello everybody,<p>I built Memory Graph to help students (and myself) build a correct mental model of Python references, mutability, and copying, and to make debugging data structures less “print-driven”. It’s inspired by Python Tutor, but focuses on clearer graphs and on running locally in many different environments and debuggers. The Memory Graph Web Debugger quickly turns your web browser into a Python debugger where the whole program state is visualized in each step, clearly showing aliasing and the structure of the data, giving insight that is hard to get with just printing.<p>Some interesting examples:<p>- Recursion, decimal to binary conversion: <a href="https://memory-graph.com/#codeurl=https://raw.githubusercontent.com/bterwijn/memory_graph/refs/heads/main/src/binary_convert.py&timestep=1.0&play" rel="nofollow">https://memory-graph.com/#codeurl=https://raw.githubusercont...</a><p>- Binary Tree data structure: <a href="https://memory-graph.com/#codeurl=https://raw.githubusercontent.com/bterwijn/memory_graph/refs/heads/main/src/bin_tree.py&timestep=0.2&play" rel="nofollow">https://memory-graph.com/#codeurl=https://raw.githubusercont...</a><p>- Cocktail Shaker Sort: <a href="https://memory-graph.com/#codeurl=https://raw.githubusercontent.com/bterwijn/memory_graph/refs/heads/main/src/cocktail_sort.py&breakpoints=16,45&continues=1&timestep=0.2&play" rel="nofollow">https://memory-graph.com/#codeurl=https://raw.githubusercont...</a><p>Here you can find some difficult Python Data Model exercises for use in education where Memory Graph helps explain the correct answer:<p><pre><code> https://github.com/bterwijn/memory_graph_videos/blob/main/exercises/exercises.md</code></pre>
No other tools from this source yet.