为何Next.js的Fetch日志仅显示在终端而非Chrome DevTools？

我习惯用Chrome DevTools调试Next.js服务端代码，通过NODE_OPTIONS='--inspect' next dev启动应用，再通过chrome://inspect连接DevTools。但终端能看到Fetch相关日志，DevTools控制台却看不到。

复现步骤 #

• 全新安装Next.js 15.2.3版本
• 修改package.json的dev脚本为："dev": "NODE_OPTIONS='--inspect' next dev --turbopack"
• 在next.config.js中配置Fetch日志：

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

• 在page.tsx中添加Fetch请求：

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>
  )
}

• 执行npm run dev启动应用
• 对比终端与DevTools控制台的输出

疑问：为何这些Fetch日志没通过console.log打印，也没法像其他日志一样在DevTools中显示？

这是因为Next.js的logging.fetches日志并非通过V8引擎的console.log输出，而是直接写入Node.js的process.stdout/process.stderr流。Chrome DevTools的chrome://inspect仅捕获V8层面的console系列调用（比如console.log、console.error），对直接写入标准输出/错误流的内容不会转发到DevTools控制台。

如果要在DevTools中看到Fetch相关日志，推荐以下方案：

自定义Fetch拦截器 #

在服务端代码中封装fetch方法，手动用console.log打印请求相关信息，让日志进入DevTools的捕获范围。

示例：新建lib/fetch.ts文件

export async function loggedFetch(input: RequestInfo | URL, init?: RequestInit) {
  // 打印请求地址和配置
  console.log(`[Fetch] 请求地址: ${input.toString()}`, init || '无额外配置');
  const response = await fetch(input, init);
  // 打印响应状态
  console.log(`[Fetch] 响应状态: ${response.status} ${response.statusText}`, input.toString());
  return response;
}

在page.tsx中替换原生fetch为封装后的版本：

import { loggedFetch } from '@/lib/fetch';

export default async function Home() {
  const data = await loggedFetch('https://api.vercel.app/blog')
  const posts = await data.json()
  return (
      <ul>
        {posts.map((post: any) => (
            <li key={post.id}>{post.title}</li>
        ))}
      </ul>
  )
}

这样调试时，DevTools控制台就能看到完整的Fetch请求日志，同时终端也会同步输出这些内容。

内容的提问来源于stack exchange，提问作者gixlg