Outsystems Devtool

OutSystems DevTools is an enterprise-grade inspection utility designed for developers building Reactive and Mobile applications on OutSystems 11 (O11). It bridges the gap between high-level OutSystems visual logic and low-level runtime contexts, giving you deep visibility and control over your running applications directly inside Chrome DevTools. 🚀 Key Features 🎨 Sleek Enterprise Dark-Mode UI An overhauled high-contrast interface built for long debugging sessions, featuring syntax highlighting, elevated card components, and fluid tab transitions. ⚡ Overview & Live Application Roles View environment metadata, runtime details, active screen/flow, module name, user tenant, and session info. Live-detects and highlights which Application Roles are currently allocated to the logged-in user with instant visual checkmark badges. 🌳 Widget Tree Inspector Inspect the exact screen structure as rendered by the OutSystems 11 runtime. Easily navigate Blocks, Placeholders, Forms, and Widgets with live DOM selection sync and dynamic element re-matching across re-renders. ⚛️ Virtual DOM & React Fiber Explorer Dive into the low-level React component tree underlying your OutSystems widgets. Inspect and edit Fiber Props, State, and Context in real time with commit-driven updates and stable node tracking. 👁️ Live Watchers & Real-Time Diffing Pin screen components or widgets to track state changes live. Compare current vs. previous values side-by-side on every re-render without pausing application execution. 💾 Local DB & Storage Inspector (EntityService-Powered) Manage Local Storage, IndexedDB/WebSQL, and Client Variables in clean, dedicated views: • Live Client Variables: View and modify Client Variables in real time without redeploying or writing temporary debug UI. • Runtime-Safe LocalDB CRUD: Create, read, update, and delete local database records through OutSystems' native `EntityService` wrapper and generated `<Entity>Record` model constructors, ensuring proper data typing, UTC date stability, and auto-numbered primary keys. 🌐 Intelligent Network Interception (CDP) Powered by Chrome DevTools Protocol (`Fetch.requestPaused`), seamlessly intercept outgoing REST API requests and Server Actions to inject custom JSON mock responses, mock HTTP status codes, and test edge cases without modifying backend data or redeploying code. 📊 Performance Metrics & Session Export Analyze screen load times, DOM interactive phases, and resource counts. Export full debugging session payloads to JSON for team collaboration and offline analysis. 🔒 Privacy & Security First OutSystems DevTools runs 100% locally within your browser context. No telemetry, tracking, or session data is collected, stored, or transmitted to external servers.