Debug in Browser
Catch the errors your terminal never shows, from a frontend running in a browser that VS Code launches, and debug them where they happen.
Closed beta
Debug in Browser is on only for accounts with beta access. Without it, both browser commands answer with Debug in Browser is in closed beta. It catches browser-side failures your terminal never shows: silent exceptions, swallowed 4xx and 5xx. Everything else in DebugAI works as normal. and a Request access button. You can also request access here.
It launches your frontend in Chrome or Edge under VS Code's JavaScript debugger and watches for what the terminal never prints: uncaught exceptions, unhandled promise rejections, console.error calls, and network requests that fail. A small watching badge sits in the page while it runs.
Start your dev server
Open your project folder, then start the dev server as you normally do. Without a folder open, the command answers DebugAI: Open your project folder first.
Run Debug in Browser
Run DebugAI: Debug in Browser. It takes your dev server's address from your terminal output, your running tasks, or the address you used last in this workspace. When it can only guess from your package.json, or finds nothing, it asks Which URL is your dev server on?, filled in with its guess or http://localhost:3000.
It only launches local dev servers. Anything else is refused with DebugAI only launches local dev servers., and a value that is not a full address with Enter a full URL, e.g. http://localhost:5173.
If nothing answers at that address you get DebugAI: nothing is answering at http://localhost:3000. Start your dev server, then try again. with Launch anyway and Use a different URL.
The browser opens as a debug session named DebugAI Browser Session. If none can start, the message asks Is a Chrome or Edge build installed?
Debug what it catches
When something fails, a notification offers to debug it:
- one error:
DebugAI caught:and where it happened, with Find root cause and Ignore; - a failed request: what failed and the file and line that sent it, with Debug this and Ignore;
- several at once:
DebugAI caught N browser errors. Review?with Review and Ignore.
Each runs as a normal debug and uses one of your debugs. The answer opens in the usual results panel.
You'll know it worked when
The status bar shows DebugAI: watching, and the page you opened has the watching badge.
Everything it caught
DebugAI: Show Browser Captures, or a click on the DebugAI: watching status bar item, lists what this session caught under DebugAI: caught in this browser session. Pick one to find its root cause. An error with no source location warns that the answer will be generic, because there is no code to read, and offers Analyse anyway. Before anything is caught it says DebugAI: nothing caught in this browser session yet.
It also watches Chrome and Edge debug sessions you start yourself from VS Code.
Console only
If the network watch could not attach, you are told DebugAI is watching console errors but not network requests. Failed requests will not be caught this session. and the status bar reads DebugAI: watching console only. Exceptions and console.error are still caught.
What it sends
For a failed request: the method, the URL, the status, and the headers and bodies, with credential headers removed and bodies redacted first. For an exception: the error and where it happened, like any debug. More in What leaves your machine.