Web Debug Agent

Click or drag part of a local page and hand it, with a screenshot, to the Claude Code session or Codex thread you pick.

Point at part of a page you are building and hand it to the coding agent session of your choice. Press Cmd+Shift+U, then click an element or drag a region. Pick which Claude Code session or Codex thread should receive it, say what should change, and send. Leave the box empty to just point at something. What the agent receives: • A cropped screenshot of exactly what you selected, so it can see the design rather than guess at it. • The element tree, with each element's own text — not innerText, so a parent does not repeat everything its children already said. • The source file and line that rendered the element, when a JSX source stamp is installed. • The CSS rules behind the values, with their var() chains intact. Given only "border-radius: 6px" an agent writes 6px into your code and quietly kills theming; given the chain it swaps a design token instead. Other click-to-edit tools route by project directory, so whichever agent happens to be watching that folder picks the request up. This one routes by session: the picker lists your live Claude Code sessions and recent Codex threads by their real titles, and you choose one. The site you used last is remembered, so a given app keeps going to the same session. Needs one command on your machine, once: "npx webdbg install". A browser extension cannot open a Unix socket or run a CLI, so this registers a small helper that Chrome starts by itself whenever the picker needs it and stops afterwards. Nothing stays running, and no token is pasted anywhere — Chrome only connects this extension's id to it. The picker is injected only on localhost, 127.0.0.1 and *.localhost. It does not run on public websites. Open source under the MIT license: https://github.com/bhpark1013/instant-web-capture-for-agent