Chrome DevTools snippets

Paste → Run → See origin.
No build. No npm. No bookmarklet.

To Use DevTools Snippets in Chrome

You can read more about snippets at the Chrome Developer Tools documentation.

• Open Chrome devtools.
• Go to “Sources → Snippets”, and add whichever ones you want.
• Paste the code, name the snippet, and click Run (▶).

Where the magic happens: paste your snippet here, hit Run, and see functions traced in real time.

Snippets

DOM Origin & Debugging

• class-origin-tracer.js — Traces who changed your DOM classes; bundle/VM-friendly origins, built-in noise filters (interval/RAF/timeout), same-origin iframe auto-inject, optional bridge to top.

• child-origin-tracer.js — Traces who added/removed DOM children (append/prepend/before/after, remove, inner/outerHTML, jQuery); noise filters + iframe support; ‘+ / − first, ? last-resort matching.

• function-tracer.js — Traces same-origin app functions (not vendor libs); logs call order, Δ time, callee path, caller file:line:col; hooks events/timers/rAF; optional arg sketch; auto-start, no build.

Contributing

PRs welcome! Keep each snippet single-file, run Prettier, and include a short repro/screenshot.

License

MIT LICENSE