Signals Inspector

Inspect TC39 Signals on a page: the dependency graph, every write, and why each computed re-ran. Framework-neutral.

Signals Inspector is a DevTools panel for the TC39 Signals proposal. It shows every Signal.State, Signal.Computed and Signal.subtle.Watcher on a page, how they depend on each other, every write, and why each computed last re-ran. It isn't tied to a framework. Anything built on the proposal's API can be inspected: your own code, a library, or a framework that uses Signals underneath. What's in the panel: Signals: a live table of every signal with its value, its writes or runs, and whether a Watcher depends on it. Detail: where a signal was created (click to open the source), its value, what it reads, what reads it, and its recent history. A computed says which sources changed to make it re-run. You can set a State from the panel to try things out. Graph: the dependency graph from states to watchers. Selecting a signal highlights everything upstream and downstream. Timeline: writes, runs with their causes and timing, errors and watcher notifications, written as sentences: "subtotal → 36 because qty changed". How it gets in: before the page's scripts run, the extension provides an instrumented globalThis.Signal (the reference polyfill, or the browser's native Signal if there is one). Code written as globalThis.Signal ?? polyfill, the way the proposal suggests, is inspected with no changes. Runtimes that keep a private copy can register with one line; the hook is documented in the repository. It runs on localhost, *.localhost, 127.0.0.1 and file:// pages. Add other sites, such as a staging server, on the options page. No data leaves your computer. No analytics, no network requests. Try the API without installing anything in the Signals Playground: https://journey-to-code-org.github.io/signals-devtools/ Source and docs: https://github.com/journey-to-code-org/signals-devtools