Hey folks,
I’ve been working on a Chrome extension called Hotwire DevTools and wanted to share it here since this community would probably get the most use out of it.
The short version: it plugs into Chrome DevTools and gives you proper tooling for inspecting Stimulus and Turbo at runtime, instead of hunting through the DOM manually.
Here’s what it does:
Elements sidebar — when you click any element in the inspector, a “Stimulus” pane shows up with everything scoped to that element: which controllers own it, their current values, connected targets, outlet wiring, actions, CSS classes, and params. It also shows reverse relationships — “this element is targeted by X” and “this element is used as an outlet by Y”.
Hotwire DevTools panel — a separate tab in DevTools with:
-
A live list of all mounted Stimulus controller instances
-
Values, targets, outlets, actions, and lifecycle event logs per controller
-
An outlet graph showing how controllers are wired together
-
Turbo Frames status (id, src, busy state, load times)
-
Turbo-enabled elements (links, forms, buttons) with their frame/action/method info
It works with any Stimulus app, not just Rails — but the Turbo stuff is obviously most useful in a Rails/Hotwire context.
Would love feedback from people actually building with Hotwire day to day. Happy to hear what’s missing or what would make it click better with your workflow.
