@vercel/next-browser 0.5.1 → 0.7.0

package/README.md

@@ -38,7 +38,7 @@ Requires Node >= 20.
 
 | Command                              | Description                                        |
 | ------------------------------------ | -------------------------------------------------- |
-| `open <url> [--cookies-json <file>]` | Launch browser and navigate (with optional cookies) |
+| `open <url> [--cookies <file>]`      | Launch browser and navigate (with optional cookies) |
 | `close`                              | Close browser and kill daemon                      |
 
 ### Navigation
@@ -62,9 +62,9 @@ Requires Node >= 20.
 | `snapshot`        | Accessibility tree with `[ref=eN]` markers on interactive elements |
 | `errors`          | Build and runtime errors for the current page                 |
 | `logs`            | Recent dev server log output                                  |
+| `browser-logs`    | Browser console output (log, warn, error, info)               |
 | `network [idx]`   | List network requests, or inspect one (headers, body)         |
-| `preview [caption]` | Screenshot + open in viewer window (accumulates across calls) |
-| `screenshot`      | Viewport PNG to a temp file (`--full-page` for entire page)   |
+| `screenshot [caption] [--full-page]` | Viewport PNG to a temp file (caption shown in Screenshot Log) |
 
 ### Interaction
 
@@ -77,11 +77,20 @@ Requires Node >= 20.
 
 ### Performance & PPR
 
-| Command        | Description                                                  |
-| -------------- | ------------------------------------------------------------ |
-| `perf [url]`   | Core Web Vitals + React hydration timing in one pass         |
-| `ppr lock`     | Freeze dynamic content to inspect the static shell           |
-| `ppr unlock`   | Resume dynamic content and print shell analysis              |
+| Command                        | Description                                          |
+| ------------------------------ | ---------------------------------------------------- |
+| `perf [url]`                   | Core Web Vitals + React hydration timing in one pass |
+| `renders start`                | Start recording React re-renders                     |
+| `renders stop [--json]`        | Stop and print per-component render profile          |
+| `ppr lock`                     | Freeze dynamic content to inspect the static shell   |
+| `ppr unlock`                   | Resume dynamic content and print shell analysis      |
+
+### Instrumentation
+
+| Command                        | Description                                          |
+| ------------------------------ | ---------------------------------------------------- |
+| `instrumentation set <path>`   | Inject script before page scripts on every navigation |
+| `instrumentation clear`        | Remove instrumentation script                        |
 
 ### Next.js MCP
 

package/dist/browser.js

@@ -30,6 +30,7 @@ let page = null;
 let profileDirPath = null;
 let initialOrigin = null;
 let ssrLocked = false;
+let instrumentationVersion = 0;
 let screenshotBrowser = null;
 let screenshotPage = null;
 let screenshotEntries = [];
@@ -87,6 +88,7 @@ export async function close() {
     release = null;
     settled = null;
     ssrLocked = false;
+    instrumentationVersion = 0;
     // Clean up temp profile directory.
     if (profileDirPath) {
         const { rmSync } = await import("node:fs");
@@ -95,6 +97,30 @@ export async function close() {
         initialOrigin = null;
     }
 }
+// ── Instrumentation ─────────────────────────────────────────────────────────
+//
+// addInitScript can't be removed, so we version-gate: each `set` bumps the
+// version and registers a new script that only runs when its version matches.
+// `clear` bumps the version with no matching script, disabling the old one.
+export async function instrumentationSet(script) {
+    if (!page)
+        throw new Error("browser not open");
+    const ctx = page.context();
+    const v = ++instrumentationVersion;
+    // The version gate runs first, then the guarded script.
+    await ctx.addInitScript(`window.__NB_IV__=${v}`);
+    await ctx.addInitScript(`if(window.__NB_IV__===${v}){${script}}`);
+    // Apply immediately on the current page.
+    await page.evaluate(script);
+}
+export async function instrumentationClear() {
+    if (!page)
+        throw new Error("browser not open");
+    const ctx = page.context();
+    // Bump version — no matching script, so nothing runs.
+    const v = ++instrumentationVersion;
+    await ctx.addInitScript(`window.__NB_IV__=${v}`);
+}
 // ── PPR lock/unlock ──────────────────────────────────────────────────────────
 //
 // The lock uses @next/playwright's `instant()` which sets the
@@ -451,6 +477,9 @@ export async function push(path) {
     if (!page)
         throw new Error("browser not open");
     const before = page.url();
+    const resolved = new URL(path, before).href;
+    if (resolved === before)
+        throw new Error("already on this URL");
     await page.evaluate((p) => window.next.router.push(p), path);
     await page.waitForURL((u) => u.href !== before, { timeout: 10_000 }).catch(() => { });
     return page.url();

package/dist/cli.js

@@ -150,7 +150,15 @@ if (cmd === "screenshot") {
     const fullPage = args.includes("--full-page");
     const caption = args.slice(1).filter((a) => a !== "--full-page").join(" ") || undefined;
     const res = await send("screenshot", { fullPage, caption });
-    exit(res, res.ok ? String(res.data) : "");
+    if (res.ok) {
+        const { path, errors } = res.data;
+        const parts = [path];
+        if (errors)
+            parts.push("\nerrors:\n" + json(errors));
+        console.log(parts.join(""));
+        process.exit(0);
+    }
+    exit(res, "");
 }
 if (cmd === "snapshot") {
     const res = await send("snapshot");
@@ -369,6 +377,20 @@ if (cmd === "viewport") {
     const data = res.data;
     exit(res, `${data.width}x${data.height}`);
 }
+if (cmd === "instrumentation" && arg === "set") {
+    const filePath = args[2];
+    if (!filePath) {
+        console.error("usage: next-browser instrumentation set <path>");
+        process.exit(1);
+    }
+    const script = readFileSync(filePath, "utf-8");
+    const res = await send("instrumentation-set", { instrumentationScript: script });
+    exit(res, "instrumentation set");
+}
+if (cmd === "instrumentation" && arg === "clear") {
+    const res = await send("instrumentation-clear");
+    exit(res, "instrumentation cleared");
+}
 if (cmd === "close") {
     const res = await send("close");
     exit(res, "closed");
@@ -477,5 +499,8 @@ function printUsage() {
         "  page               show current page segments and router info\n" +
         "  project            show project path and dev server url\n" +
         "  routes             list app routes\n" +
-        "  action <id>        inspect a server action by id");
+        "  action <id>        inspect a server action by id\n" +
+        "\n" +
+        "  instrumentation set <path>  inject script before page scripts\n" +
+        "  instrumentation clear       remove instrumentation script");
 }

package/dist/cookies.js

@@ -4,7 +4,8 @@
  *
  *   1. JSON array — Playwright-style `[{"name": "x", "value": "y"}, ...]`.
  *   2. cURL command — as produced by DevTools → Network → Copy as cURL.
- *      The Cookie header is extracted from the `-H 'cookie: …'` argument.
+ *      Cookies are extracted from `-H 'cookie: …'` or `-b '…'`/`--cookie '…'`
+ *      (macOS Chrome uses `-b` instead of `-H`).
  *   3. Bare cookie header — `name=v; name=v; ...` (e.g. the value of the
  *      Cookie row in DevTools → Network → Request Headers).
  *
@@ -43,8 +44,12 @@ function extractCookieHeaderFromCurl(curl) {
     const joined = curl.replace(/\\\r?\n\s*/g, " ").replace(/\^\r?\n\s*/g, " ");
     // -H 'cookie: …' (bash) or -H "cookie: …" (cmd). Chrome/Firefox use one
     // or the other depending on which Copy-as-cURL variant the user picked.
-    const m = joined.match(/-H\s+(['"])\s*cookie\s*:\s*([\s\S]*?)\1/i);
-    return m ? m[2] : null;
+    const h = joined.match(/-H\s+(['"])\s*cookie\s*:\s*([\s\S]*?)\1/i);
+    if (h)
+        return h[2];
+    // macOS Chrome uses -b (or --cookie) instead of -H for cookies.
+    const b = joined.match(/(?:-b|--cookie)\s+(['"])([\s\S]*?)\1/);
+    return b ? b[2] : null;
 }
 function parseCookieHeader(header) {
     const pairs = [];

package/dist/daemon.js

@@ -78,8 +78,11 @@ async function run(cmd) {
         return { ok: true, data };
     }
     if (cmd.action === "screenshot") {
-        const data = await browser.screenshot({ fullPage: cmd.fullPage, caption: cmd.caption });
-        return { ok: true, data };
+        const [path, errors] = await Promise.all([
+            browser.screenshot({ fullPage: cmd.fullPage, caption: cmd.caption }),
+            browser.mcp("get_errors").catch(() => null),
+        ]);
+        return { ok: true, data: { path, errors } };
     }
     if (cmd.action === "links") {
         const data = await browser.links();
@@ -145,6 +148,14 @@ async function run(cmd) {
         const data = await browser.viewportSize();
         return { ok: true, data };
     }
+    if (cmd.action === "instrumentation-set") {
+        await browser.instrumentationSet(cmd.instrumentationScript);
+        return { ok: true };
+    }
+    if (cmd.action === "instrumentation-clear") {
+        await browser.instrumentationClear();
+        return { ok: true };
+    }
     if (cmd.action === "close") {
         await browser.close();
         return { ok: true };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/next-browser",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "Headed Playwright browser with React DevTools pre-loaded",
   "license": "MIT",
   "repository": {