The best tools to debug a Next.js app
No single built-in tool sees a whole Next.js app, because half of it runs on the server. Here is what each debugging tool can and cannot show you, and when to reach for it.
The tools at a glance
| Tool | Sees | Misses |
|---|---|---|
| Browser DevTools | Page requests, browser console, client breakpoints | Everything on the server |
| React Developer Tools | Component tree, props, state, render timing | Network, server code |
| Next.js error overlay | Runtime and build errors with source-mapped stacks | Anything that is not an error |
Node.js inspector (--inspect) | Server breakpoints, variables, CPU and memory profiles | Server network calls, by default |
| VS Code debugger | Server and client breakpoints from the editor | Network and log correlation |
logging.fetches | Server fetch URLs, status, cache, timing | Headers, bodies, axios and other clients |
OpenTelemetry (instrumentation.ts) | Traces across services, in dev and production | Needs setup and a trace viewer; no breakpoints |
| Error monitoring (Sentry and others) | Production errors with context | Day-to-day debugging in development |
| qaisdebugs | Browser and server requests with bodies, all logs, server and client breakpoints, in one place | Production: it is a development tool |
Browser and React DevTools
Still the first stop for anything you can see in the page: layout, client state, failed requests from the browser and client-side errors. React Developer Tools adds the component tree, so you can check the props a Client Component actually received.
The Node.js inspector and VS Code
Run NODE_OPTIONS='--inspect' next dev and attach Chrome's DevTools (chrome://inspect) or VS Code. You get real breakpoints in Server Components, Route Handlers and Server Actions. It is powerful but takes setup per project, and it shows nothing about network calls unless you step into them. See VS Code and Chrome breakpoints.
Fetch logging and OpenTelemetry
logging: { fetches: { fullUrl: true } } in next.config is the quickest way to see which URLs the server fetched. For tracing across services, Next.js supports OpenTelemetry through instrumentation.ts and @vercel/otel. That suits production monitoring more than quick local debugging.
qaisdebugs: one inspector for the whole app
qaisdebugs is a free, open-source dev tool built for exactly the gap above. It attaches to next dev from outside, with no code changes, and shows:
- every server-side call (
fetch, axios, got, node-fetch) with headers, bodies and the file:line that made it; - every browser request, merged with the server's half of the same call;
- server and browser logs in one list;
- breakpoints in Server and Client Components, set by clicking a line;
- an MCP server, so Claude or Cursor can debug the app with you.
npm install -g qaisdebugs
qaisdebugs devWhich one should you use?
- Something looks wrong in the page: Browser DevTools and React DevTools.
- The data is wrong: look at the server's requests, with qaisdebugs or
logging.fetches. - You need a variable's value on the server: a breakpoint, through qaisdebugs, Chrome or VS Code.
- It only fails in production: error monitoring and OpenTelemetry.