Nucleus DevTools

Element sidebar — Neutron lifecycle and Quark orchestration publications for the selected element

See exactly what every element did and why — Neutron lifecycles and Quark rule applications, live, inside Chrome DevTools. Nucleus DevTools adds an "Element" pane to the Elements panel for pages built with the Nucleus Stack (@excom/neutron, @excom/quark). Select any node and read its history and current state: • Neutron — every lifecycle effect the element applied, with the exact props, events and calls it produced, plus its current props. • Quark — every rule that matched the element, grouped per run: selector, declarations, resolved values, no-op / wipe / error status; plus its current $variables, Quark-written attributes and custom properties, listeners and iterate() row context. • Hover any key to see the declaration that produced it. • Live — new publications append as they happen; pick another node to re-read its history. • Paint heatmap — a toolbar toggle overlays every Quark-painted element with its paint count, blue (fewest) to red (most). • Definition audits — Neutron element definitions are checked for attribute-naming mistakes; warnings go to the page console. • Agent tools — eleven JSON tools (diagnostics, state_snapshot, explain_attribute, …) for coding agents, discoverable by chrome-devtools-mcp, plus a "Copy for AI" button that produces a one-file bug report. Zero setup: no app changes, no debug flags. Works on any page using the Nucleus Stack and does nothing on other pages. Collects no data and makes no network requests. Also runs in Edge, Brave and other Chromium browsers. Documentation: https://excom.dev/packages/nucleus-devtools