Using the Dashboard
Learn how to leverage Blazrlytics' powerful features to inspect, locate, and optimize your Blazor components in real-time.
On this page
Visualise your Blazor Component Tree
The dashboard provides an instant, hierarchical view of your entire Blazor component tree. By hovering over elements in the tree, you can instantly identify those components directly on your page with our visual highlighting overlay.
- Tree view: Navigate deeply nested component hierarchies.
- Visual highlighting: See exactly where a component is rendered on your active page.
- Heatmap: Observe component lifecycle events in real-time using a heatmap visualisation to identify which components are rendering most frequently.
Jump from Page to Component Instantly
Locate components inside deeply nested hierarchies with a single click. Blazrlytics maps rendered DOM elements directly back to their source code counterpart.
When you right-click on a component in the application, and choose "Find with Blazrlytics" the dashboard will highlight its exact location in the render tree and provide you with the Component Name and Namespace, allowing you to quickly find it in your IDE.
* Note: This "Find with Blazrlytics" feature is only available when using the DevTools extension.
Full Event Lifecycle Tracing
No more tracing with Console.WriteLine or guessing which parameters are causing re-renders. Blazrlytics gives you the full picture of your component's lifecycle and state changes in one place.
- Lifecycle Hooks: Track every event—from
SetParametersAsyncandOnInitializedtoOnAfterRenderandShouldRender. - Parameter Diffing: Compare state changes effortlessly. Our diff trees highlight the exact parameter deltas causing state mutations.
- Microsecond Accuracy: Locate and eliminate time-consuming renders using high-precision event timings.
Filter and Export Event Traces
When profiling large applications, the event log can grow quickly. Use the built-in filtering tools to isolate the exact data you need.
- Filtering: Isolate logs by execution duration, component type, namespace, or specific event types (e.g., show only renders exceeding 5ms).
- CSV Export: Export raw event streams as a spreadsheet to analyze in Excel or other tabular tools.
- JSON Export: Export event payloads as JSON structures for integration with external analysis tools.
Dedicated Browser DevTools Panel
Prefer keeping your application interface clean? Launch the Blazrlytics Browser DevTools extension for Chrome or Edge to inspect performance side-by-side in your console without polluting your application layout tree.
- Seamless Integration: Available directly in Chrome/Edge developer console.
- Low Overhead: Extremely low performance impact utilizing browser service workers.
- Full Feature Parity: Supports the "Find with Blazrlytics" component locator alongside all tracing features.