DevTools

nbridge/devtools is an in-page debugging panel: live message history, bridge logs, metrics, and a form for hand-sending events — right inside the WebView, where browser devtools are often awkward to attach.

Setup

Two requirements:

1. The bridge must be created with devTools.enabled: true.
2. Mount DevToolsUI and import the stylesheet once.

// src/lib/bridge.ts
import { createBridgeHooks } from "nbridge/react";

export const { instance } = createBridgeHooks({
  config: {
    debug: true,
    devTools: {
      enabled: process.env.NEXT_PUBLIC_BRIDGE_DEV_TOOLS === "true",
      maxMessageHistory: 50,      // messages kept in the history tab
      logDestination: "devtools", // "console" | "devtools" | "both" | "none"
      maxConsoleLogEntries: 100,  // console entries mirrored into the panel
    },
  },
});

// app/layout.tsx (or any client component near the root)
"use client";

import { DevToolsUI } from "nbridge/devtools";
import "nbridge/devtools/styles.css";
import { instance } from "@/lib/bridge";

export function BridgeDevTools() {
  return <DevToolsUI bridge={instance} defaultOpen={false} />;
}

Toggle the panel with Ctrl+Shift+B, close with Escape, or use the floating trigger button. The panel renders into a portal on document.body.

Production builds

DevTools are disabled automatically when NODE_ENV is "production" — the console patcher and log collection refuse to start, and a warning is emitted instead. Ship the component gated behind an environment flag anyway to avoid the bundle weight.

Panels

Tab	Shows
Events	Sent/received message history with direction, type, payload, and timing (up to maxMessageHistory).
Logs	Bridge-internal logs, plus mirrored console.* output when logDestination routes there.
Metrics	Live metrics, queue stats, and batch stats — when those features are enabled.
Send	Hand-craft and send a message. With schemas registered, message types are listed and each schema's example payload is pre-filled.
Host	Resolved Host Rules state — only when a host prop is passed (see below).

Host Rules tab

Pass a Host Rules engine as an optional host prop to add a Host tab:

import { DevToolsUI } from "nbridge/devtools";
import { instance } from "@/lib/bridge";
import { host } from "@/lib/host-rules";

<DevToolsUI bridge={instance} host={host} />;

The tab shows the detected platform, raw + parsed version, and every capability/variant with its resolved value. Its override controls let QA preview any (platform, version) combination in a desktop browser — the one exception to "detection wins". The prop is optional and the tab is omitted when it's absent, so the DevToolsUI API stays backward compatible.

Log routing

The bridge routes its logging (and bridge.log/warn/error/info(...)) according to devTools.logDestination:

• "devtools" (default) — only into the panel's Logs tab
• "console" — only the browser console
• "both" — both
• "none" — silence

Debug-level messages require debug: true on the bridge config; errors always log.

Without React

The panel UI is React, but collection is not. Any bridge with devTools.enabled: true records history and logs; you can reach the collector directly:

bridge.isDevToolsEnabled(); // boolean
bridge.getDevTools();       // BridgeDevTools | null — message history, logs, stats providers