The Next.js debugging tool that sees every request, log and line your app runs.
Server and browser network calls, server and browser logs, and breakpoints in Server and Client Components, in one inspector. No SDK, no config, no code changes.
Next.js 13.4 to 16webpack and Turbopackfetch, axios, got, node-fetchMIT licensed, free
127.0.0.1:4983
Why
Why debugging Next.js is hard: the Network tab only sees half
In a Next.js app most of the interesting traffic never reaches the browser: Server Components calling your backend, Route Handlers calling third-party APIs, Server Actions and axios running on the server.
Without qaisdebugs
Server-side calls show up as scattered console.log lines in a terminal
No way to tell which page or component made a backend call
Browser DevTools for the client, the terminal for the server, nothing that joins them
Breakpoints in server code mean wiring up --inspect by hand
With qaisdebugs
Every request, browser and server, in one list with headers, bodies and timing
Each call nested under the page that caused it, with the exact file and line
Server and browser logs together, each tied to its request
Click a line number to pause server or client code, then step and inspect
Features
Everything you need to debug a Next.js app, on one screen
Server network calls
Every fetch, axios, got or node-fetch call made on the server, with headers, bodies, status, timing and the file:line that made it.
Browser network calls
Every request the page makes, in any browser, merged with the server's view of the same call into one row.
Traces
Each page load is a tree: the browser's request, the server calling itself, and the calls out to external APIs.
Unified logs
Server and browser console.* output and uncaught errors in one list, each with its file, line and request.
Server and client breakpoints
Pause Server Components, Route Handlers, Server Actions and 'use client' code. Step, read scopes, evaluate.
Redaction built in
Passwords, tokens, API keys, auth headers and cookies are masked before anything is recorded.
Zero setup
Attaches from outside with a Node preload. Your code, config and dependencies stay exactly as they are.
Debug with Claude
An MCP server lets Claude read the requests and logs and set breakpoints in your app itself.
Screens
One inspector, three views
Browser, server and external calls in one list. The trace shows /api/chain calling the server twice and an external API once.The server paused inside an axios call: call stack, scopes and a console that evaluates in the paused frame.Every level, each line with its file and trace. Note cardToken, masked automatically.
Quick start
Start debugging your Next.js app in a minute
Install it
Once, globally. Node 20.6 or newer.
$npm install -g qaisdebugs
Start your app through it
From your Next.js app's folder. It runs your own dev script.
$qaisdebugs dev
Open the inspector
Then use your app as usual and watch everything arrive.
→http://127.0.0.1:4983
Claude (MCP)
Let Claude debug your Next.js app with you
qaisdebugs includes an MCP server. Claude can read the requests, traces and logs, open your source files, and set breakpoints, wait for the pause and read the variables.
The products list on /shop is empty. Find out why.
● list_problems · get_trace 7a46…
The page loaded fine, but the server called api.example.com/products?category=undefined from app/shop/page.tsx:18, and the API answered with an empty list.
Work out whether the failing code runs on the server or in the browser, then check its logs, its network calls and its variables. Browser DevTools cover client code; server code needs the terminal, fetch logging and the Node.js inspector. qaisdebugs shows both sides in one place. Read the full guide.
What is the best tool to debug a Next.js app?
Browser DevTools and React DevTools for the page, the Node.js inspector or VS Code for server breakpoints, and qaisdebugs to see server and browser requests, logs and breakpoints together. See the tools compared.
Why don't server-side requests show in the browser's Network tab?
Server Components, Route Handlers and Server Actions run inside the Next.js server, so their calls go straight from Node.js to the API and never pass through the browser. qaisdebugs records them where they happen and joins them with what the page did. More on server-side requests.
How do I see server-side fetch and axios requests in Next.js?
Setting logging: { fetches: { fullUrl: true } } in next.config lists fetch calls with URL, status and timing. qaisdebugs records every call, axios, got and node-fetch included, with headers, bodies and the file and line that made it.
How do I debug Next.js Server Components?
Their console.log output goes to the terminal, and since Next.js 15 it is also replayed in the browser console. To pause them, start next dev with the Node.js inspector, or click a line in the qaisdebugs Sources view. Server Components guide.
How do I set breakpoints in Next.js server code?
Start the dev server with NODE_OPTIONS='--inspect' next dev and attach Chrome through chrome://inspect, or use a VS Code launch.json. With qaisdebugs, click a line number in its Sources view and it connects for you. VS Code and Chrome guide.
How do I debug Client Components?
Use the browser's DevTools Sources panel and React Developer Tools. With qaisdebugs, qaisdebugs dev opens your app in a Chrome window of its own and connects to it, so a breakpoint you set in the inspector pauses there. Chrome does not allow tools to pause an everyday window.
How do I debug Next.js API routes and Route Handlers?
Call the route directly with curl -i, log the incoming request, and pause inside the handler. Check the query parameter names and await params in Next.js 15 and later. API routes guide.
How do I debug Next.js Server Actions?
A Server Action is a POST to the current page with a Next-Action header. Its logs go to the terminal, and breakpoints work like any server code. Watch for redirect() inside try/catch and a missing revalidatePath. Server Actions guide.
Where does console.log go in Next.js?
Server code logs to the terminal running next dev; client code logs to the browser console. Client Components log in both during their first render. qaisdebugs shows server and browser logs in one list. Next.js logs guide.
How do I fix Next.js hydration errors?
Find what differs between the server and browser render, often dates, random values, browser-only checks or invalid HTML nesting, and render those values after mounting or only in the browser. Hydration errors guide.
Do I need to change my Next.js code to use qaisdebugs?
No. qaisdebugs attaches to the dev server from outside with a Node preload. Your code, config and dependencies stay untouched.
Which Next.js versions does qaisdebugs support?
Next.js 13.4 to 16 with the App Router, on webpack or Turbopack, with npm, pnpm, yarn or bun.
Does qaisdebugs send my data anywhere?
No. Everything stays on your machine. The inspector listens on 127.0.0.1 only, and passwords, tokens and cookies are masked before they are recorded.
Does it slow my app down or affect production?
It only runs inside next dev, and only when started through qaisdebugs. Production builds and next start are never touched, and recording happens off the request path.
Can Claude or Cursor debug my Next.js app?
Yes. qaisdebugs includes an MCP server: run claude mcp add qaisdebugs -- qaisdebugs mcp, or add the command qaisdebugs mcp in Cursor's MCP settings. The assistant can then read requests and logs and set breakpoints. MCP guide.
Is qaisdebugs free?
Yes. It is open source under the MIT license, on npm and GitHub.
