Media
4 items
Description
Inspect Stimulus controllers, Turbo Frames, and Stream actions in your Hotwire app directly from Chrome DevTools. Hotwire DevTools gives you a dedicated Chrome DevTools panel for Hotwire applications. Inspect the live state of every Stimulus controller and Turbo component on the page — without console.log. Controller inspector — browse every mounted Stimulus controller and drill into its values, targets, outlets, CSS classes, actions, and data attributes Value mutation log — track live value changes with before/after state and timestamps Outlet graph — visualise controller-to-controller outlet relationships as an interactive dependency diagram Turbo Frames panel — monitor frame load state, navigation counts, load durations, and trigger reloads Turbo Stream log — capture every stream action (append, replace, remove…) as it happens, with HTML preview, filtering by type, and clipboard copy Interactive elements panel — audit all Turbo-enhanced links and forms on the page at a glance Elements panel sidebar — select any DOM node in Chrome's Elements panel and instantly see every Stimulus controller scoping it, with its full attribute surface and reverse outlet/target lookups STIMULUS TAB Browse every registered controller by identifier. Select an instance to inspect its full attribute surface: actions, values, targets, outlets, CSS classes, nested controllers, and data attributes. Values are shown as a live expandable tree with object drill-down, one-click console logging, and a Recent Changes section tracking the last five mutations with before/after state and timestamps. Targets and outlets list their matched elements with Scroll and Reveal in Elements controls. Outlets include a Select Controller shortcut to jump directly to the connected controller's detail pane. Registered-but-unmounted controllers are listed too, showing their static schema including value types and defaults, target names, outlet identifiers, and methods. When outlet connections exist, a collapsible Outlet Graph strip appears at the top. Opening the full Outlet Map modal renders an auto-laid-out dependency diagram where nodes are clickable to navigate to a controller. FRAMES TAB Lists every turbo-frame on the page with live status indicators (busy, idle, lazy), a navigation counter, and load duration in milliseconds. Selecting a frame shows its properties alongside Scroll, Reveal, and Reload controls. Below the frame detail sits the Stream Actions log. Every Turbo Stream render is captured in real time with action type, target ID, and timestamp. You can filter by action type, pause, clear, expand entries to view the full rendered HTML, or copy it to the clipboard. ELEMENTS TAB Lists all Turbo-enhanced links, forms, and submit buttons with their HTTP method, target frame, data-turbo-action value, and any confirm or submits-with configuration — useful for auditing which elements are wired to which frames. ELEMENTS PANEL SIDEBAR A Stimulus pane in Chrome's Elements panel updates whenever you select a DOM node, showing every controller scoping that element with its values, targets, outlets, CSS classes, params, and actions, plus reverse lookups for which controllers target or use it as an outlet.