A developer tool for inspecting and debugging Stimulus applications.

Overview

The Stimulus DevTools Chrome Extension is designed to simplify the process of debugging Stimulus on a web page. It provides a user-friendly interface for inspecting values, targets, outlets, and classes of Stimulus controllers, all directly from Chrome's DevTools.

Inspired by the amazing Vue DevTools and Nuxt DevTools.

Features

• ✨ Controllers List: Get a quick view of all Stimulus controllers present on the current page.
• 🔍 Property Inspection: Inspect values, targets, outlets, and classes associated with each controller.
• ✏️ Real-time Modification: Change controller's values on-the-fly and observe immediate updates.

Usage

Install the Extension

Download and install the Stimulus DevTools extension from the Chrome Web Store.

Open Stimulus DevTools

1. Navigate to your web page where Stimulus controllers are used.
2. Open Chrome DevTools by right-clicking on the page, selecting "Inspect", or using the keyboard shortcut (Ctrl+Shift+I on Windows/Linux or Cmd+Option+I on macOS).
3. In Chrome DevTools, go to the "Stimulus" tab.

Enable Stimulus DevTools on your project

Ensure that the Stimulus application is added to window.Stimulus in your project. This is necessary for the extension to detect and display the Stimulus controllers properly.

For example :

// src/application.js
import { Application } from "@hotwired/stimulus"

import HelloController from "./controllers/hello_controller"
import ClipboardController from "./controllers/clipboard_controller"

window.Stimulus = Application.start() // <- Here
Stimulus.register("hello", HelloController)
Stimulus.register("clipboard", ClipboardController)

TypeScript

If you are using TypeScript in your project, it may throw an error when accessing window.Stimulus. To fix that, add this stimulus.d.ts file :

import type { Application } from '@hotwired/stimulus';

declare global {
  interface Window {
    Stimulus: Application;
  }
}

License

This project is licensed under the MIT License.

---

robinsimonklein.com  ·  GitHub @robinsimonklein  ·  𝕏 @rsimonklein