History

9 snapshots

Tracking since Apr 1, 2026.

View as table

Date	Users	Rating	Reviews	Version
Apr 1, 2026	—	—	—	1.1.0
Apr 16, 2026	13	—	—	1.1.0
Apr 22, 2026	12	—	—	1.1.0
Apr 27, 2026	12	—	—	1.2.0
May 4, 2026	18	—	—	1.2.0
May 10, 2026	28	—	—	1.2.0
May 15, 2026	33	—	—	1.2.0
May 28, 2026	36	—	—	1.2.0
Jun 4, 2026	41	—	—	1.2.0
Now	43	—	—	1.2.0

Changelog

Apr 22, 2026

description

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.

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.

Apr 22, 2026

short_description

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

Inspect Stimulus controllers, Turbo Frames, and Stream actions in your Hotwire app directly from Chrome DevTools.

Permissions & access

Permissions: scripting
Host access: <all_urls>

Screenshots

About

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.