In a Next.js app, most of the interesting traffic never reaches the browser's Network tab: Server Components calling your backend, Route Handlers calling third-party APIs, Server Actions, and axios clients running on the server. So I built qaisdebugs, a free, open-source dev tool that shows every one of those calls, with headers, bodies, timing and the exact file and line that made it, nested under the page request that caused it. It also puts server and browser logs in one timeline, and lets you set breakpoints in Server and Client Components from the same inspector. There's nothing to add to your project: no SDK, no config, no instrumentation.ts. It works with Next.js 13.4 to 16, with webpack or Turbopack, and it masks passwords, tokens and cookies before anything is shown.
Try it in any Next.js app:
npm install -g qaisdebugs qaisdebugs dev Then open http://127.0.0.1:4983 and load a page. Feedback and ideas are very welcome!
