Dev Tools for Turbo and Stimulus

Latest Version

Version

0.3.2

Update

December 6, 2024

Size

121KiB

Developer

Hotwire Dev Tools Extension

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

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Hotwire Dev Tools", "version": "0.3.2", "description": "Dev Tools for Turbo and Stimulus", "icons": { "16": "images/icon-16-wo.png", "32": "images/icon-32-wo.png", "48": "images/icon-48-wo.png", "128": "images/icon-128-wo.png" }, "content_scripts": [ { "matches": [""], "js": ["dist/hotwire_dev_tools_content.js"], "css": ["styles/hotwire_dev_tools_content.css"] } ], "permissions": ["storage", "activeTab"], "action": { "default_title": "Click or press Alt+Shift+S to launch Dev Tools", "default_popup": "popup.html" }, "web_accessible_resources": [ { "resources": ["dist/hotwire_dev_tools_inject_script.js", "styles/hotwire_dev_tools_detail_panel.css"], "matches": [""] } ], "commands": { "_execute_action": { "suggested_key": { "default": "Alt+Shift+S" } } }}

Download CRX(121KiB)