Why can't I see the fetch log information in the Chrome DevTool, but I can see it from the terminal?
Context
I'm used to debug my NextJs app using the DevTool, also for the Server-side code. So I run NODE_OPTIONS='--inspect' next dev and then I connect the DevTool with chrome://inspect - Reference.
What I've noticed is that on the terminal where I run NextJs I can see the following logs, in particular the one related to the fetch:
Debugger listening on ws://127.0.0.1:9230/03b84594-de9a-4cfe-afc1-f57df72eb6e0 For help, see: https://nodejs.org/en/docs/inspector the --inspect option was detected, the Next.js router server should be inspected at 9230. ▲ Next.js 15.2.3 (Turbopack) - Local: http://localhost:3000 - Network: http://192.168.1.59:3000 ✓ Starting... Debugger attached. ✓ Ready in 925ms Starting inspector on 127.0.0.1:9230 failed: address already in use ○ Compiling / ... ✓ Compiled / in 939ms GET / 200 in 1554ms │ GET https://api.vercel.app/blog 200 in 244ms (cache skip) │ │ Cache skipped reason: (auto no cache) ✓ Compiled /favicon.ico in 341ms GET /favicon.ico?favicon.45db1c09.ico 200 in 388ms but the same is not true for the Console in the DevTool:
How to reproduce it
- Start from a fresh NextJs Installation - I'm on next
15.2.3 - Add the inspect option Reference -
"dev": "NODE_OPTIONS='--inspect' next dev --turbopack", - Add the logging option for the fetch in
next.config.js- Reference
module.exports = { logging: { fetches: { fullUrl: true, }, }, } - Add a fetch, for example this
page.tsx
export default async function Home() { const data = await fetch('https://api.vercel.app/blog') const posts = await data.json() return ( <ul> {posts.map((post: any) => ( <li key={post.id}>{post.title}</li> ))} </ul> ) } - Open the console and run it
npm run dev - Compare the output between the terminal and the console in the DevTool
Question
Why do we have this behavior, the logging of the fetch is not printed using the console.log? Why don't they appear as all the other logs?
Many thanks
