Hotwire Dev Tools icon

Hotwire Dev Tools

Extension Actions

CRX ID
phdobjkbablgffmmgnjbmfbbofnbkajc
Description from extension meta

Dev Tools for Turbo and Stimulus

Image from store
Hotwire Dev Tools
Description from store

This extension has the goal of helping developers inspect their Turbo and Stimulus applications.

Turbo features:
- Highlight Turbo Frames
- Monitor incoming Turbo Streams
- Display Turbo context information (Turbo Drive enabled, morphing enabled, ...)
- Log all Turbo related events
- Log warning when a Turbo Frame ID is not unique
- Log warning when an element has `data-turbo-permanent` but no ID or a non-unique ID
- Highlight Turbo Frame changes

Stimulus features:
- Highlight Stimulus controllers
- List all Stimulus controllers on the page
- Log warning when a `data-controller` doesn't match any registered controller
- Log warning when a Stimulus target is not nested within the corresponding controller

Usage:
Once installed, click on the extension icon (or press Alt+Shift+S) to open the Dev Tools options.
From there you can enable/disable the features you want to use.

Source code: https://github.com/leonvogt/hotwire-dev-tools

Latest reviews

Igor Kasyanchuk
really useful extension
Borna Kapusta
This is something that I was looking for. Thank you so much!
Noah Horton
This was deeply needed and is awesome.
Enrico Labedzki
The best Addon for https://hotwired.dev stack so far. The developer is very responsive to requests and ideas. Awaiting version 0.2.0 coming in the next few days.