Configurationnext.config.jsbrowserDebugInfoInTerminal

browserDebugInfoInTerminal

この機能は現在実験的であり、変更される可能性があります。本番環境での使用は推奨されません。お試しいただき、GitHubでフィードバックをお寄せください。

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

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

使用方法

転送を有効にする

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

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

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

depthLimit: (オプション) ネストされたオブジェクト/配列の文字列化の深さを制限します。デフォルト: 5
edgeLimit: (オプション) オブジェクトまたは配列ごとに含めるプロパティまたは要素の最大数。デフォルト: 100

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    browserDebugInfoInTerminal: {
      depthLimit: 5,
      edgeLimit: 100,
    },
  },
}
 
export default nextConfig

ソースロケーション

この機能が有効になっている場合、ソースロケーションはデフォルトで含まれます。

'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: 利用可能な場合はソースロケーション情報を含めます。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    browserDebugInfoInTerminal: {
      showSourceLocation: false,
    },
  },
}
 
export default nextConfig

バージョン	変更履歴
`v15.4.0`	experimental `browserDebugInfoInTerminal` が導入されました

役に立ちましたか？