Hotwire DevTools

Inspect Hotwire Stimulus controllers, targets, values, and outlets.

Inspect Stimulus controllers, Turbo Frames & Turbo Streams in real time. Zero setup — no code changes required. Hotwire DevTools gives Rails developers deep, real-time inspection of every Stimulus controller, Turbo Frame, and Turbo Stream on the page — without modifying your app, exposing globals, or adding any configuration. Works in development and production builds. ──────────────────────────────── STIMULUS CONTROLLER INSPECTOR ──────────────────────────────── Every controller on the page is surfaced with its full live state: • Values — types, expandable syntax-coloured trees, log-to-console action, and a per-instance change history tracking the last 5 mutations • Targets — declared targets with matched DOM elements; scroll-to-element and reveal-in-Elements-panel actions • Outlets — connected outlet identifiers and their elements • CSS Classes — resolved class token lists • Actions — action descriptors parsed and displayed as colour-coded chips: source controller → event → target controller#method • Lifecycle events — initialize, connect, and disconnect with timestamps • Dispatched events — custom events emitted by each controller instance Registered Controllers view: see every controller in the Stimulus registry, its full static schema, and the number of mounted instances. ──────────────────────────────── TURBO FRAMES INSPECTOR ──────────────────────────────── List every <turbo-frame> on the page. See id, src, loading mode, busy state, and navigation count. Hover to highlight frames in the page; click to select. ──────────────────────────────── TURBO STREAMS LOG ──────────────────────────────── Live log of turbo:before-stream-render events. Filter by action type (append, prepend, replace, update, remove…), pause and resume the stream, clear the log, and expand any entry to preview the full HTML payload. ──────────────────────────────── TURBO INTERACTIVE ELEMENTS ──────────────────────────────── Full inventory of every Turbo-enabled link, form, and submit button: URL, HTTP method, target frame, disabled state, confirm prompt, and more. ──────────────────────────────── ELEMENTS PANEL SIDEBAR ──────────────────────────────── Select any element in DevTools and the Stimulus sidebar shows instantly: • Controllers scoping the selected element (own and ancestors), with their values, targets, outlets, classes, and params • "Targeted by" — which controllers declare the element as a named target • "Used as outlet by" — which controllers connect to it as an outlet • Actions declared on the element • Nearest Turbo Frame ancestor ──────────────────────────────── ZERO SETUP ──────────────────────────────── Hotwire DevTools discovers Stimulus by probing the page's internal data structures. window.Stimulus does not need to be exposed. No configuration. No changes to your application code. ──────────────────────────────── KEYBOARD SHORTCUT ──────────────────────────────── Open the Hotwire DevTools panel from anywhere in DevTools: • macOS: Cmd+Shift+H • Windows/Linux: Ctrl+Shift+H ──────────────────────────────── Built for Rails developers who use Stimulus and Turbo — the first-class DevTools experience the Hotwire ecosystem deserves.