---
title: "DevTools Panel"
description: "The DevTools Panel provides an interactive, in-browser development overlay and command center designed to inspect, diagnose, and configure Next.js applications during local development. It surfaces..."
last_updated: "2026-09-23T10:52:03.186406+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/technical/development-and-diagnostics/devtools-panel"
---
Relevant source files
The following files were used as context for generating this wiki page:
- [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx)
- [packages/next/src/next-devtools/dev-overlay.browser.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.browser.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx)
- [packages/next/src/server/dev/hot-reloader-turbopack.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/server/dev/hot-reloader-turbopack.ts)
- [packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx)
- [packages/next/src/next-devtools/dev-overlay/shared.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/shared.ts)
- [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx)
- [packages/next/src/next-devtools/entrypoint.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/entrypoint.ts)
- [packages/next/src/next-devtools/dev-overlay/menu/panel-router.css](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.css)
- [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/copy-error-button.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/copy-error-button.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx)
- [packages/next/src/client/dev/debug-channel.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/client/dev/debug-channel.ts)
- [packages/next/src/next-devtools/dev-overlay/menu/context.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/context.tsx)
- [packages/next/src/next-devtools/userspace/pages/pages-dev-overlay-setup.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/pages/pages-dev-overlay-setup.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx)
- [packages/next/src/server/mcp/tools/get-page-metadata.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/server/mcp/tools/get-page-metadata.ts)
- [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx)
- [packages/next/src/next-devtools/dev-overlay.shim.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.shim.ts)
- [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx)
- [packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/cache-disabled.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/cache-disabled.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts)
- [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx)
- [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx)
- [packages/next/src/next-devtools/dev-overlay-ux.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay-ux.ts)
## Overview
The DevTools Panel provides an interactive, in-browser development overlay and command center designed to inspect, diagnose, and configure Next.js applications during local development. It surfaces critical runtime information, route structures, compilation metrics, and instant navigation behaviors directly inside userspace. Sources: [packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx#L43-L108)
By isolating its user interface within a shadow DOM root and coordinating through context providers, the DevTools Panel empowers developers to inspect route segment trees, trigger boundary fallbacks, analyze navigation diagnostics, and manage user preferences without leaving the browser environment. Sources: [packages/next/src/next-devtools/dev-overlay.browser.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.browser.tsx#L253-L331)
## DevTools Architecture and Shadow Portal
### Overview
The DevTools architecture relies on a specialized entrypoint structure, a shadow DOM isolation mechanism, and router error boundary wrappers to integrate the development overlay into Next.js applications without contaminating userspace styles or runtime scopes. The entrypoint module exports core browser overlay controllers while maintaining shim fallbacks for unsupported environments. Sources: [packages/next/src/next-devtools/entrypoint.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/entrypoint.ts#L1-L2), [packages/next/src/next-devtools/dev-overlay.shim.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.shim.ts#L1-L26)
### Bootstrap Lifecycle and Queuable Dispatcher
Events occurring during module evaluation or before React establishes a dispatch connection are intercepted by a queueing mechanism. The `createQueuable` wrapper stores incoming dispatcher actions until the root reducer connects via `maybeDispatch`. Sources: [packages/next/src/next-devtools/dev-overlay.browser.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.browser.tsx#L128-L142)
```typescript
function createQueuable(
queueableFunction: (dispatch: Dispatch, ...args: Args) => void
) {
return (...args: Args) => {
if (maybeDispatch) {
queueableFunction(maybeDispatch, ...args)
} else {
queue.push((dispatch: Dispatch) => {
queueableFunction(dispatch, ...args)
})
}
}
}
```
Sources: [packages/next/src/next-devtools/dev-overlay.browser.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.browser.tsx#L130-L142)
The initialization lifecycle executes through insertion and layout effects inside `DevOverlayRoot`, coordinating theme classes and event replays:
`DevOverlayRoot` mount → `useInsertionEffect` assigns `maybeDispatch = dispatch` → `setTimeout` schedules `replayQueuedEvents(dispatch)` → `queue` items execute sequentially → `useLayoutEffect` synchronizes theme classes (`dark` or `light`) onto the shadow root host element. Sources: [packages/next/src/next-devtools/dev-overlay.browser.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.browser.tsx#L279-L307)
> [!NOTE]
> Fonts must be loaded outside the shadow DOM root because standard stylesheet encapsulation prevents font face rule inheritance across shadow boundaries; `FontStyles` renders directly into the outer document tree. Sources: [packages/next/src/next-devtools/dev-overlay.browser.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay.browser.tsx#L317-L318)
### ShadowPortal Isolation and Styles
The DevOverlay wraps its UI components inside a `ShadowPortal` and loads specialized component styles and scale updaters to guarantee visual isolation from the host application. Sources: [packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx#L43-L57), [packages/next/src/next-devtools/dev-overlay-ux.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay-ux.ts#L1-L6)
| Asset / Component | Source File | Purpose |
| :--- | :--- | :--- |
| `FontStyles` | [packages/next/src/next-devtools/dev-overlay/font/font-styles.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/font/font-styles.tsx) | Injects required typography definitions outside the shadow boundary. Sources: [packages/next/src/next-devtools/dev-overlay-ux.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay-ux.ts#L4-L4) |
| `ComponentStyles` | [packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/styles/component-styles.tsx) | Encapsulates widget styles within the shadow root. Sources: [packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx#L3-L3) |
| `ScaleUpdater` | [packages/next/src/next-devtools/dev-overlay/styles/scale-updater.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/styles/scale-updater.tsx) | Manages scaling metrics for overlay responsiveness. Sources: [packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx#L6-L6) |
| `DevOverlay` | [packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx#L43-L108) | Main orchestration container for errors, panels, and indicators. Sources: [packages/next/src/next-devtools/dev-overlay-ux.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay-ux.ts#L5-L5) |
### Router Error Boundary Wrappers
Application and Pages routers integrate error boundaries to capture runtime exceptions and interface with the dev tools dispatcher. In the App Router, `AppDevOverlayErrorBoundary` catches render errors, flags runtime error status, and opens the error overlay via `dispatcher.openErrorOverlay()`. Sources: [packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx#L42-L72)
```typescript
export class AppDevOverlayErrorBoundary extends PureComponent<
AppDevOverlayErrorBoundaryProps,
AppDevOverlayErrorBoundaryState
> {
static contextType = AppRouterContext
declare context: AppRouterInstance | null
state: AppDevOverlayErrorBoundaryState = {
error: null,
}
static getDerivedStateFromError(
thrownValue: Error
): Partial {
RuntimeErrorHandler.hadRuntimeError = true
return {
error: { thrownValue },
}
}
componentDidCatch(err: unknown) {
if (
process.env.NODE_ENV === 'development' &&
isError(err) &&
err.message === SEGMENT_EXPLORER_SIMULATED_ERROR_MESSAGE
) {
return
}
dispatcher.openErrorOverlay()
}
}
```
Sources: [packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx#L42-L72)
> [!WARNING]
> Simulated segment explorer errors (`SEGMENT_EXPLORER_SIMULATED_ERROR_MESSAGE`) are intentionally ignored by `componentDidCatch` to prevent false error triggers during tree inspection. Sources: [packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx#L63-L70)
## DevTools Indicator and Status Display
### Overview
The DevTools indicator serves as the primary floating entrypoint for the Next.js development overlay. Managed by `DevToolsIndicator`, it wraps a draggable region and the Next.js logo badge, positioning itself dynamically within the viewport according to configured offsets and panel states. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx#L21-L73)
### Status Indicator and Status Enumeration
The `StatusIndicator` component manages active compilation and rendering states. The underlying `Status` enum defines operational lifecycle states that determine the color and content of the indicator badge, giving visual priority to compilation tasks over rendering processes. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L4-L34)
| Status Enum Value | String Representation | Status Dot Color | Purpose |
| :--- | :--- | :--- | :--- |
| `Status.None` | `''` | (none) | Indicator is hidden when idle. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L4-L6) |
| `Status.Compiling` | `'Compiling'` | `#f5a623` (orange) | Indicates an active build or compilation pass. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L9-L9), [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L54-L54) |
| `Status.Rendering` | `'Rendering'` | `#50e3c2` (teal) | Indicates a standard client-side transition or render pass. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L6-L6), [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L55-L55) |
| `Status.RenderingColdCache` | `'Rendering (cold cache)'` | `#f5a623` (orange) | Render pass hit an unpopulated cache. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L7-L7), [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L56-L56) |
| `Status.RenderingCacheDisabled` | `'Rendering (cache disabled)'` | `#f5a623` (orange) | Render pass occurred while caches were bypassed. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L8-L8), [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L57-L57) |
The function `getCurrentStatus()` resolves the current status hierarchy from building flags, rendering flags, and cache states:
```typescript
export function getCurrentStatus(
buildingIndicator: boolean,
renderingIndicator: boolean,
cacheIndicator: CacheIndicatorState
): Status {
if (buildingIndicator) {
return Status.Compiling
}
if (renderingIndicator) {
if (cacheIndicator === 'cold') {
return Status.RenderingColdCache
}
if (cacheIndicator === 'bypass') {
return Status.RenderingCacheDisabled
}
return Status.Rendering
}
return Status.None
}
```
Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L12-L34)
> [!NOTE]
> Compilation checks take precedence over rendering checks inside `getCurrentStatus`. While a client transition is pending, cache states color the rendering status before settling into a persistent cache badge. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/status-indicator.tsx#L17-L23)
### Drag Positioning and Panel Synchronization
The indicator container uses `Draggable` to let developers reposition the widget. When a drag action updates the indicator position, `DevToolsIndicator` dispatches position actions and invokes `useUpdateAllPanelPositions` to synchronize open panel placements across the workspace. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx#L44-L57), [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx#L81-L112)
```typescript
export const useUpdateAllPanelPositions = () => {
const { state, dispatch } = useDevOverlayContext()
return (position: DevToolsIndicatorPosition) => {
dispatch({
type: ACTION_DEVTOOLS_PANEL_POSITION,
devToolsPanelPosition: position,
key: STORE_KEY_SHARED_PANEL_LOCATION,
})
const panelPositionKeys = Object.keys(state.devToolsPanelPosition).filter(
(key) => key.startsWith(STORAGE_KEY_PANEL_POSITION_PREFIX)
)
const panelPositionPatch: Record = {
[STORE_KEY_SHARED_PANEL_LOCATION]: position,
}
panelPositionKeys.forEach((key) => {
dispatch({
type: ACTION_DEVTOOLS_PANEL_POSITION,
devToolsPanelPosition: position,
key,
})
panelPositionPatch[key] = position
})
saveDevToolsConfig({
devToolsPanelPosition: panelPositionPatch,
})
}
}
```
Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx#L81-L111)
> [!CAUTION]
> Dragging is disabled (`disableDrag={panel !== null}`) whenever any panel is actively open. This prevents desynchronization bugs and UI jank between the floating logo and its expanding menu panels. Sources: [packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx#L44-L46)
### User Preferences and Server Controls
The `UserPreferencesBody` component provides configuration controls within the DevTools info interface. It allows users to modify themes, adjust indicator positions and scale sizes, configure hide shortcuts, restart the development server, or clear bundler caches. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx#L17-L35)
| Preference Option | Handler Function | Action / Storage Effect |
| :--- | :--- | :--- |
| **Theme** | `handleThemeChange` | Toggles portal host classes (`dark`, `light`, or clears both for system) and calls `saveDevToolsConfig({ theme })`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx#L39-L57) |
| **Position** | `handlePositionChange` | Updates position state via `setPosition()` and persists with `saveDevToolsConfig({ devToolsPosition })`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx#L59-L64) |
| **Size / Scale** | `handleSizeChange` | Parses numeric scale value, updates scale state, and saves via `saveDevToolsConfig({ scale })`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx#L66-L70) |
| **Restart Dev Server** | Inline button handler | Invokes `restartServer({ invalidateFileSystemCache: false })`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx#L188-L199) |
| **Reset Bundler Cache** | Inline button handler | Invokes `restartServer({ invalidateFileSystemCache: true })` if `process.env.__NEXT_BUNDLER_HAS_PERSISTENT_CACHE` is enabled. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx#L202-L225) |
## Panel Routing and Navigation Context
### Overview
The panel routing and navigation context coordinates sub-views within the development overlay via the `PanelRouterContext` and `MenuPanel` components. It maps active states, route inspection menus, and cache status panels to specific view identifiers. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L1-L38), [packages/next/src/next-devtools/dev-overlay/menu/context.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/context.tsx#L8-L24)
### Panel State Kinds and Menu Definitions
The `PanelStateKind` type defines all available sub-panel views that can be rendered through the router context. The `MenuPanel` component populates the dev overlay menu items based on current runtime flags, issue counts, bundler settings, and caching indicators. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L37-L189), [packages/next/src/next-devtools/dev-overlay/menu/context.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/context.tsx#L8-L17)
| PanelStateKind Value | Menu Trigger Label / Condition | Associated Body / Component |
| :--- | :--- | :--- |
| `preferences` | Preferences (GearIcon, footer item) | `UserPreferencesBody`. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L177-L185) |
| `route-type` | Route (Static / Dynamic indicator) | `RouteInfoBody`. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L93-L110) |
| `segment-explorer` | Route Info (ChevronRight, App Router only) | `SegmentExplorer` / `PageSegmentTree`. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L169-L176) |
| `instant-navs` | Navigation Inspector (ChevronRight, `__NEXT_INSTANT_NAV_TOGGLE`) | `InstantNavsPanel`. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L137-L148) |
| `cache-disabled` | Cache (Disabled, `cacheIndicator === 'bypass'`) | `CacheDisabledBody`. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L149-L158) |
| `cold-cache` | Cache (Cold, `cacheIndicator === 'cold'`) | `ColdCacheBody`. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L159-L168) |
| `turbo-info` | Bundler (Turbopack status / upgrade link) | External link / Turbopack info. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L111-L131) |
| `panel-selector` | Internal panel switcher context | Dynamic panel containers. Sources: [packages/next/src/next-devtools/dev-overlay/menu/context.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/context.tsx#L8-L17) |
### Route and Cache Status Panels
When a route is evaluated, `RouteInfoBody` switches between `StaticRouteContent` and `DynamicRouteContent` based on the `isStaticRoute` boolean flag and `routerType` (`'pages'` or `'app'`). For static routes, it displays prerendering information; for dynamic routes, it explains request-time rendering and points to dynamic APIs or `fetch({ cache: 'no-store' })` triggers. The `CacheDisabledBody` component warns developers when all caches were bypassed due to browser devtools configuration, hard reloads, or draft mode. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx#L3-L130), [packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/cache-disabled.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/cache-disabled.tsx#L3-L21)
> [!NOTE]
> The error overlay toggle click handler checks `state.isErrorOverlayOpen`: if true, it dispatches `ACTION_ERROR_OVERLAY_CLOSE` and resets the panel to `null`; otherwise, it sets the panel to `null`, resets `selectedIndex` to `-1`, and dispatches `ACTION_ERROR_OVERLAY_OPEN`. Sources: [packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/menu/panel-router.tsx#L82-L91)
## Route Segment Explorer and Metadata
### Overview
The Route Segment Explorer visualizes the active App Router segment hierarchy and boundary state in the Next.js DevTools overlay. It maintains interactive segment trees, boundary override counters, and triggers simulation states for runtime error, loading, and not-found boundaries. Sources: [packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx#L25-L61), [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx#L87-L98)
### Segment Tree Visualization and State Management
The component renders the segment structure via `PageSegmentTree`, which queries `useSegmentTree()` and computes the active boundary override count using `countActiveBoundaries()`. Global resets invoke `traverseTreeAndResetBoundaries()`, resetting boundary types across all trie nodes. File pills (`FilePill`) render icons depending on whether a file is a builtin segment or custom user code, and clicking any file label triggers `openInEditor()`. Sources: [packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx#L25-L151), [packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx#L450-L462)
> [!WARNING]
> `SegmentTrieNode` registers and unregisters node state using `useLayoutEffect` with `dispatcher.segmentExplorerNodeAdd(nodeState)` and `dispatcher.segmentExplorerNodeRemove(nodeState)`. Standard `useEffect` will fail to preserve state updates correctly during suspense boundaries. Sources: [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx#L50-L57)
### Boundary Triggers and Simulation Types
Userspace segment nodes interact with `SegmentStateProvider` and `SegmentBoundaryTriggerNode` to simulate boundary fallbacks. When `boundaryType` is activated on a node, `SegmentBoundaryTriggerNode` mounts the corresponding fallback component (`LoadingSegmentNode`, `NotFoundSegmentNode`, or `ErrorSegmentNode`). Sources: [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx#L62-L98), [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx#L129-L161)
| SegmentBoundaryType | Trigger Action / Implementation | Behavior |
| :--- | :--- | :--- |
| `loading` | `use(forever)` | Suspends the component render via a pending Promise. Sources: [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx#L70-L74) |
| `not-found` | `notFound()` | Triggers Next.js `not-found` boundary render. Sources: [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx#L62-L64) |
| `error` | `throw new Error(SEGMENT_EXPLORER_SIMULATED_ERROR_MESSAGE)` | Throws simulated error to activate error boundary. Sources: [packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx#L66-L68) |
| `global-error` | Validation check in `PageSegmentTreeLayerPresentation` | Detects missing global error boundaries. Sources: [packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx#L180-L200) |
### MCP Metadata Inspection and Tool Integration
The Model Context Protocol (MCP) server registers the `get_page_metadata` tool via `registerGetPageMetadataTool()`. This tool verifies active browser connections, sends `HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_PAGE_METADATA` requests, and processes responses through `convertSegmentTrieToPageMetadata()`. Sources: [packages/next/src/server/mcp/tools/get-page-metadata.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/server/mcp/tools/get-page-metadata.ts#L19-L79)
```typescript
export function registerGetPageMetadataTool(
server: McpServer,
sendHmrMessage: (message: HmrMessageSentToBrowser) => void,
getActiveConnectionCount: () => number
) {
server.registerTool(
'get_page_metadata',
{
description: 'Get runtime metadata about what contributes to the current page render from active browser sessions.',
inputSchema: {},
},
async (_request) => {
mcpTelemetryTracker.recordToolCall('mcp/get_page_metadata')
const connectionCount = getActiveConnectionCount()
if (connectionCount === 0) {
return { content: [{ type: 'text', text: JSON.stringify({ error: 'No browser sessions connected...' }) }] }
}
const responses = await createBrowserRequest(
HMR_MESSAGE_SENT_TO_BROWSER.REQUEST_PAGE_METADATA,
sendHmrMessage,
getActiveConnectionCount,
DEFAULT_BROWSER_REQUEST_TIMEOUT_MS
)
return { content: [{ type: 'text', text: JSON.stringify(formatPageMetadata(responses)) }] }
}
)
}
```
Sources: [packages/next/src/server/mcp/tools/get-page-metadata.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/server/mcp/tools/get-page-metadata.ts#L19-L117)
> [!TIP]
> When `formatPageMetadata` processes segment trees for MCP output, it sorts segments by `typeOrder` (`layout` → boundary → `page` → other) and normalizes paths by stripping `@boundary` and `__next_builtin__` prefixes before serializing session results. Sources: [packages/next/src/server/mcp/tools/get-page-metadata.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/server/mcp/tools/get-page-metadata.ts#L194-L236)
## Instant Navigation Diagnostics and Guidance
### Overview
The instant navigation panel coordinates testing and diagnostics for prerendered and prefetched UI states in Next.js applications. It monitors state via `COOKIE_NAME` (`next-instant-navigation-testing`), tracks transitions with `useSyncExternalStore`, and drives AI prompt generation and fix recommendation cards. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx#L207-L214), [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts#L23-L27), [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L61-L105)
### Instant Navigation Panel States and Cookie Tracking
The instant navigation cookie serves as the sole source of truth for tracking capture status, storing JSON arrays that represent pending states, captured MPA page loads, and captured SPA navigation route trees. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx#L211-L214), [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts#L4-L10)
| Cookie Array Structure | State Representation | Meaning / Description |
| :--- | :--- | :--- |
| `[0, id]` | `pending` | Waiting to capture instant navigation events. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts#L4-L5) |
| `[1, id, null]` | `mpa` | Captured MPA page load displaying prerendered UI. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts#L6-L7) |
| `[1, id, { from, to }]` | `spa` | Captured SPA navigation from/to route trees. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts#L8-L9) |
> [!NOTE]
> The raw cookie string acts as the `useSyncExternalStore` snapshot, relying on value comparisons for referential stability while parsing structured tree data via `useMemo` during renders. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts#L83-L86), [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts#L142-L146)
### Transition Timing Layers and Call Execution
When a user triggers "Continue Rendering", the capture session performs a multi-step state machine execution: `clearInstantNavCaptureCookie()` deletes the cookie, `state.renderingIndicator` transitions through pending phases, and `cookieStore.set()` writes a new pending cookie value to re-arm capture. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx#L198-L262)
```typescript
// Re-arm call chain execution walkthrough
clearInstantNavCaptureCookie()
→ setInstantNavTransientStatus('idle')
→ cookieStore.delete(COOKIE_NAME)
→ state.renderingIndicator (false → true)
→ setInstantNavTransientStatus('rearming-awaiting-end')
→ state.renderingIndicator (true → false)
→ setInstantNavTransientStatus('rearming-awaiting-cookie')
→ cookieStore.set(...)
```
Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx#L198-L261)
> [!WARNING]
> Unmounting the panel resets transient UI states via `ACTION_INSTANT_NAVS_RESET`, but Fast Refresh remounts preserve active captures by avoiding cookie deletion unless the router panel explicitly changes away from `'instant-navs'`. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx#L215-L232)
### Fix Recommendation Cards and Guidance Integration
The `InstantGuidance` component constructs diagnostic fix recommendation cards using `getCards(kind, variant, cause)`. It supports copyable AI prompts via `CopyPromptButton`, combining rule titles, step instructions, and failure code blocks. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L61-L105), [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L208-L223)
| Guidance Kind | Variant Types | Documentation Target URL Pattern |
| :--- | :--- | :--- |
| `sync-io` | `runtime`, `dynamic` | `SYNC_IO_DOCS[cause]` or `DOCS_URLS['sync-io']`. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L225-L226) |
| `sync-io-client` | `runtime`, `dynamic` | `SYNC_IO_CLIENT_DOCS[cause]` or `DOCS_URLS['sync-io-client']`. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L227-L228) |
| `blocking-route` | `runtime`, `dynamic` | `https://nextjs.org/docs/messages/blocking-prerender-{runtime\|dynamic}`. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L229-L233) |
| `metadata` | `runtime`, `dynamic` | `https://nextjs.org/docs/messages/blocking-prerender-metadata-{runtime\|dynamic}`. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L234-L238) |
| `viewport` | `runtime`, `dynamic` | `https://nextjs.org/docs/messages/blocking-prerender-viewport-{runtime\|dynamic}`. Sources: [packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx#L239-L243) |
## Error Overlay Toolbar and Utilities
### Overview
The `ErrorOverlayToolbar` and associated utility components provide controls within the error overlay navigation header, allowing developers to copy error details and stack traces, launch or attach the Node.js debugger, navigate to documentation, and inspect version staleness. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx#L17-L43), [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx#L26-L70)
### Toolbar Component Architecture and Layout
The `ErrorOverlayToolbar` component renders inside `ErrorOverlayNav` as a flex container with a gap of 6px (reducing to 4px on viewports under 575px wide). It orchestrates four primary toolbar utilities: `CopyErrorButton`, `DocsLinkButton`, `NodejsInspectorButton`, and `VersionStalenessInfo`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx#L17-L43), [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx#L60-L67)
| Toolbar Utility / Element | Props / Configuration | Purpose / Action |
| :--- | :--- | :--- |
| `CopyErrorButton` | `error`, `generateErrorInfo` | Copies generated runtime error stack and metadata to clipboard. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx#L29-L29) |
| `DocsLinkButton` | `errorMessage` | Opens relevant Next.js documentation based on the error message. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx#L30-L30) |
| `NodejsInspectorButton` | `defaultDevtoolsFrontendUrl` | Attaches the Node.js inspector or copies the Chrome DevTools frontend URL. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx#L31-L34) |
| `VersionStalenessInfo` | `versionInfo`, `bundlerName` | Displays version staleness information for the specified bundler. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx#L35-L39) |
### Copy Button Utilities and State Machine
The underlying `CopyButton` component uses React's `useActionState` hook to manage clipboards via a state machine with three copy states: `initial`, `success`, and `error`. It relies on an asynchronous `getContent()` function provider or direct `content` string props. Sources: [packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx#L4-L46), [packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx#L71-L96)
```typescript
// CopyButton execution walkthrough
copy()
→ React.startTransition()
→ dispatch('copy')
→ getContentString()
→ navigator.clipboard.writeText(content)
→ { state: 'success' } (or { state: 'error', error })
```
Sources: [packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx#L23-L40), [packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx#L48-L52)
> [!NOTE]
> When `copyState.state` transitions to `'success'`, a 2000ms timeout automatically dispatches a `'reset'` action to revert the button back to the `'initial'` label and icon state. Sources: [packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/copy-button/index.tsx#L105-L115)
### Node.js Inspector Launcher Integration
The `NodejsInspectorButton` manages debugging connections by posting requests to the development server endpoint `/__nextjs_attach-nodejs-inspector`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx#L247-L250)
| Action State Status | Condition | Rendered Output / Behavior |
| :--- | :--- | :--- |
| `fulfilled` (with URL) | `devtoolsFrontendUrl` is defined | Renders `CopyButton` with Node.js icon to copy Chrome DevTools frontend URL. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx#L275-L323) |
| `fulfilled` (without URL) | `devtoolsFrontendUrl` is undefined | Renders inspector button with disabled icon; clicking fires `attachDebugger`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx#L288-L307) |
| `rejected` | `fetch` or JSON parsing failed | Logs error via `console.error` and displays retry tooltip. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx#L280-L284) |
> [!WARNING]
> If the backend inspector attachment endpoint returns a non-ok response, the action catches the error and rejects with a custom message prefixed by `Failed to attach Node.js inspector:`. Sources: [packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx](https://github.com/blade47/next.js/blob/main/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx#L251-L270)
## Related
- [Dev Error Overlay](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/technical/development-and-diagnostics/dev-error-overlay)
## Sitemap
See the full [sitemap](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/llms.txt) for all pages in this wiki.