browser-debug-setup

A setup guide for keeping a dedicated Chrome browser available for debugging local websites through a remote debugging connection.

In plain words
What is it for?
Use it when browser debugging needs a persistent Chrome instance at 127.0.0.1:9222, especially when connecting with dev-browser fails because that instance is not running.
Why use it?
It provides a reusable signed-in browser session for browser testing without interfering with the developer's normal Chrome profile.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/udecode/plate-template/browser-debug-setup
Any agent
npx skills add udecode/plate-template --skill browser-debug-setup
Clone the repo
git clone --depth 1 https://github.com/udecode/plate-template

Made for: Claude Code, Codex.

Per session 48 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,159 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00048 $0.01159
Opus 5 $0.00024 $0.00580
Sonnet 5 $0.00010 $0.00232
Haiku 4.5 $0.00005 $0.00116

Measured 2d ago against content hash 1a4cc8f09144, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

browser-debug-setup scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -sS http://127.0.0.1:9222/json/version
Origin

This is a copy

100% identical to browser-debug-setup — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.agents/skills/browser-debug-setup/SKILL.md · 129 lines

How it starts

The opening of the file, as written. The whole thing — 129 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Browser Debug Setup

Use this skill when dev-browser --connect http://127.0.0.1:9222 fails because no persistent debug browser is running yet.

Goal

Get the user onto one persistent browser/profile that both the human and the agent reuse. Minimize the Allow remote debugging? popup by keeping one dedicated debug browser/profile alive.

Rules

  • Prefer one permanent debug browser/profile over disposable automation browsers.
  • Treat a custom --user-data-dir as mandatory, not optional. Chrome 136+ basically wants remote debugging to happen from a dedicated profile.
  • Keep auth in that profile. Do not fall back to cookie dumps or state files unless the user asks.
  • Use a separate signed-in Chrome profile for browser work, like dev. Do not use the user's normal daily Default profile as the source profile.
  • Clone that separate signed-in Chrome profile into the dedicated debug --user-data-dir; do not point 9222 straight at the user's daily Chrome data dir.
  • On macOS, use open -na "Google Chrome" --args ... for the debug browser. That starts a separate Chrome instance with the dedicated debug profile without touching the user's normal Chrome window.

Preferred Shape

Use a dedicated browser/profile with:

  • --remote-debugging-address=127.0.0.1
  • --remote-debugging-port=9222
  • a persistent --user-data-dir=<debug-profile-dir>

Sign in once in that dedicated browser and keep reusing it for agent work.

Quick sanity check:

curl -sS http://127.0.0.1:9222/json/version

Healthy output includes a JSON object with webSocketDebuggerUrl. Empty output or 404 means the wrong process owns 9222.

Then verify dev-browser:

dev-browser --connect http://127.0.0.1:9222 <<'EOF'
const page = await browser.getPage("persistent-main");
console.log(await page.title());
EOF

If dev-browser --connect http://127.0.0.1:9222 still cannot resolve CDP even though /json/version is healthy, connect with the exact websocket URL:

Read the full file on GitHub · 129 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 129 lines · 48 tokens per session scan A 1a4cc8f09144

Subscribe to this mod's changes

browser-debug-setup is a skill published in the GitHub repository udecode/plate-template (59 stars, last pushed 2mo ago), licensed MIT. It adds 48 tokens to every session and 1,159 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). It is 100% identical to browser-debug-setup, differing in 0 lines, and is treated as a copy.