Browser debugging
for coding agents.
tab-debug gives your coding agent the requests, errors, and app state from the browser page it’s testing, through WebMCP.
Add it to your appA file-loading bug in Transform
Reproduced in TransformWhile converting JSON to YAML, you click Fetch URL for staging.json. Before it finishes, you enter production.json and click Fetch URL again. Production arrives first. Then the earlier staging request finishes and overwrites the editor.
Four clicks, at your pace. Real downloads; delivery to the editor pauses between steps.
- Last submitted
- Nothing yet
- Now in both panes
- Waiting for a file
These panes show the same file in two formats.
// Load a JSON file to begin.# Converted YAML appears here.What your agent can read
A 200 status doesn’t explain the wrong file. Your agent also needs the last URL you submitted and the editor’s current value.
Source & reproduction notes
I reproduced the overlapping URL loads in Transform’s original code. This smaller version uses two sample files. In the walkthrough, real downloads are held before the loader updates the editor; your clicks release production first, then staging. Network timings in the tools remain unchanged. Use Load File to try it without pauses: staging takes five seconds, production is fast. The staging/production example illustrates how someone could encounter it.
Full app verification and source ↗What changes in the fix?
Number each URL load. Before updating the editor, check that its number still belongs to the latest load. An older response can finish successfully without replacing the current file.
const loadId = ++latest.current;
const response = await fetch(url);
const text = await response.text();
if (loadId !== latest.current) return;
setValue(text);Full reproduction, patch, and tests ↗