Lil' Debugger

A tiny dev tool for any framework. Add a data-debug attribute to any element, hold Ctrl+Shift, and the page shows what each element holds.

zander.wtf/lil-debugger Repo TypeScript

You put a data-debug attribute on any element, with a label, an ID or a JSON blob. Hold Ctrl+Shift and every debug element gets an outline, and a small panel shows the value of whatever you hover, then the values of its parents. It has no dependencies and works with any framework, or none.

  • Ctrl+Shift+L keeps it on, and ?lil-debug in the URL starts it locked
  • Alt+click copies a value to the clipboard
  • JSON values show on many lines, next to the tag, classes and size of the element
  • Four CSS custom properties theme it, or turn the styles off and bring your own
  • Safe to call on the server, and it survives client-side routers swapping the page

The demo and docs run the real thing. Install it with npm install -D @mrmartineau/lil-debugger.