Zubra DevTools

A Zubra pane in the Elements panel: a node's component, its .zb line, its props and state, and the signals each binding reads.

Inspect Zubra web components where you already debug: a Zubra pane beside Styles and Computed in the Elements panel. Select any element a Zubra component renders, and the pane shows: • The component and its .zb file and line. Click to open it there in your editor. • Its props and state, by the names in your script, with their current values. • Every binding, named as the DOM operation it performs (textContent, setAttribute, classList.toggle, addEventListener), with the line that wrote it and the signals it reads, down to items[0].done. • What a parent component binds onto a child. • The last update: what changed, and which bindings re-ran. It reads dependencies through Signal.subtle.introspectSources, the TC39 Signals proposal’s own introspection, so it works the same on the polyfill and on a native Signal. It’s a window onto what the compiled output does, which is just the web platform. Zubra writes standard custom elements, and the pane shows you the plain DOM work behind each line you wrote. Requirements: a development build. Run your app with Vite and @zubra/unplugin, which prepares components for the pane automatically. Production builds contain none of it. Privacy: the extension asks for no permissions, has no content scripts, and collects and sends nothing. It reads only the page you’re inspecting, only while DevTools is open.