跳到内容
配置next.config.jsbrowserDebugInfoInTerminal

browserDebugInfoInTerminal

此功能目前处于实验阶段，可能会有所更改，不建议用于生产环境。欢迎试用并在 GitHub 上分享您的反馈。

experimental.browserDebugInfoInTerminal 选项将浏览器中的控制台输出和运行时错误转发到开发服务器终端。

此选项默认禁用。启用后，仅在开发模式下有效。

用法

启用转发

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    browserDebugInfoInTerminal: true,
  },
}
 
export default nextConfig

序列化限制

深度嵌套的对象/数组会使用合理的默认值进行截断。您可以调整这些限制

  • depthLimit：（可选）限制嵌套对象/数组的字符串化深度。默认值：5
  • edgeLimit：（可选）每个对象或数组中包含的最大属性或元素数量。默认值：100
next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    browserDebugInfoInTerminal: {
      depthLimit: 5,
      edgeLimit: 100,
    },
  },
}
 
export default nextConfig

源位置

启用此功能时，默认包含源位置。

app/page.tsx
'use client'
 
export default function Home() {
  return (
    <button
      type="button"
      onClick={() => {
        console.log('Hello World')
      }}
    >
      Click me
    </button>
  )
}

单击按钮会将此消息打印到终端。

终端
[browser] Hello World (app/page.tsx:8:17)

要禁用它们，请设置 showSourceLocation: false。

  • showSourceLocation：在可用时包含源位置信息。
next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    browserDebugInfoInTerminal: {
      showSourceLocation: false,
    },
  },
}
 
export default nextConfig
版本更改
v15.4.0引入了实验性 browserDebugInfoInTerminal