Serenity Developer Tools

About

Serenity Developer Tools brings powerful widget inspection capabilities to your browser's DevTools for applications built with the Serenity framework.

🔍 WIDGET INSPECTOR
Browse the complete widget hierarchy of your Serenity application. See all active widgets organized in a searchable, filterable tree view.

🎯 ELEMENT PICKER
Click directly on any element in your page to instantly find and select its corresponding Serenity widget. Perfect for quickly locating widgets in complex UIs.

📋 PROPERTY VIEWER
Examine widget properties, options, and internal state in real-time. View the complete configuration of any widget with an interactive JSON tree.

🔗 DOM HIGHLIGHTING
Hover over widgets in the panel to highlight their corresponding DOM elements on the page. Instantly understand which elements belong to which widgets.

📍 SCROLL INTO VIEW
Lost in a large page? Click to scroll directly to any widget's DOM element, making it easy to locate components visually.

⚡ DEVELOPER EXPERIENCE
- Seamless integration with Chrome DevTools
- Fast and responsive interface
- Real-time updates as your application changes
- Filter to show only visible widgets

Built for developers working with Serenity (https://serenity.is/), an open-source ASP.NET application platform.

This extension requires access to page content to inspect Serenity widgets. No data is collected or transmitted.