āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š nextjs/app/api-reference/config/next-config-js/browserDebugInfoInTerminal ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
The experimental.browserDebugInfoInTerminal option forwards console output and runtime errors originating in the browser to the dev server terminal.
This option is disabled by default. When enabled it only works in development mode.
Enable forwarding:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
browserDebugInfoInTerminal: true,
},
}
export default nextConfig
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
browserDebugInfoInTerminal: true,
},
}
module.exports = nextConfig
Deeply nested objects/arrays are truncated using sensible defaults. You can tweak these limits:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
browserDebugInfoInTerminal: {
depthLimit: 5,
edgeLimit: 100,
},
},
}
export default nextConfig
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
browserDebugInfoInTerminal: {
depthLimit: 5,
edgeLimit: 100,
},
},
}
module.exports = nextConfig
Source locations are included by default when this feature is enabled.
'use client'
export default function Home() {
return (
<button
type="button"
onClick={() => {
console.log('Hello World')
}}
>
Click me
</button>
)
}
Clicking the button prints this message to the terminal.
[browser] Hello World (app/page.tsx:8:17)
To suppress them, set showSourceLocation: false.
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
browserDebugInfoInTerminal: {
showSourceLocation: false,
},
},
}
export default nextConfig
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
browserDebugInfoInTerminal: {
showSourceLocation: false,
},
},
}
module.exports = nextConfig
| Version | Changes |
| --------- | ---------------------------------------------------- |
| v15.4.0 | experimental browserDebugInfoInTerminal introduced |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā