Hotwire Dev Tools is a browser extension with 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, ...)
- Display warning when a Turbo Frame ID is not unique
- List all Turbo Frames on the page
Stimulus features:
- Highlight Stimulus controllers
- List all Stimulus controllers on the page
- Display warning when a
data-controller
doesn't match any registered controller
The extension can be installed at:
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.
Note: On Firefox you may need to select "Always allow on example.com" to enable the extension on your site.
- Fork the project locally
npm install
npm run dev
- to build the extension and watch for changesnpm run build
- to bundle the extension into static files for productionnpm run format
- to format changes with Prettier
Note
By default, the extension will be built for Chrome. To build for Firefox or Safari just add firefox
or safari
as an argument to the build command: npm run build firefox
or npm run build safari
.
- Open Chrome and navigate to
chrome://extensions/
- Enable Developer mode
- Click on
Load unpacked
and select thepublic
folder (make sure to build the extension first)
The easiest way is to make us of the web-ext tool:
npm install --global web-ext
cd public
web-ext run
That will open a new Firefox instance with the extension installed and hot reloading enabled.
First configure Safari to run unsigned extensions:
- Choose Safari > Settings
- Select the Advanced tab
- Check the "Show features for web developers" box
- Select the Developer tab.
- Check the Allow unsigned extensions box.
This may depend on the version of macOS and Safari you are using.
So if you can't find the settings, you may need to search for the specific version you are using.
Then you can load the extension by following these steps:
- Open Xcode
- Choose "Open Existing Project"
- Select the HotwireDevTools/HotwireDevTools.xcodeproj file (blue icon)
- Build the project (you may need to select a team in the project settings -> Signing & Capabilities)
- Open Safari > Settings > Extensions and enable the Hotwire Dev Tools extension
Bug reports and pull requests are welcome on GitHub at https://github.com/leonvogt/hotwire-dev-tools.
This project uses Prettier to format the code and ensure a consistent style.
Please run npm run format
prior to submitting pull requests.
This Dev Tool were inspired by turbo-devtool and turbo_boost-devtools 🙌