Menu

browserDebugInfoInTerminal

experimental.browserDebugInfoInTerminal オプションは、ブラウザで発生したコンソール出力とランタイムエラーを開発サーバーのターミナルに転送します。

このオプションはデフォルトで無効になっています。有効にした場合、開発モードでのみ機能します。

使用方法

転送を有効にします：

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

シリアライゼーションの制限

深くネストされたオブジェクト・配列は妥当なデフォルト値を使用して切り詰められます。これらの制限を調整できます：

  • depthLimit：（オプション）ネストされたオブジェクト・配列のシリアライゼーション深度を制限します。デフォルト値：5
  • edgeLimit：（オプション）オブジェクトまたは配列ごとに含める最大プロパティ数または要素数。デフォルト値：100
next.config.ts
TypeScript
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>
  )
}

ボタンをクリックすると、この メッセージがターミナルに出力されます。

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

これを非表示にするには、showSourceLocation: false に設定します。

  • showSourceLocation：利用可能な場合、ソースロケーション情報を含めます。
next.config.ts
TypeScript
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    browserDebugInfoInTerminal: {
      showSourceLocation: false,
    },
  },
}
 
export default nextConfig
バージョン変更内容
v15.4.0導入時期：experimental browserDebugInfoInTerminal