{
  "$type": "site.standard.document",
  "description": "I use coding agents — Claude Code, Codex, Cursor — for most of my development. They're good at reading and writing code. They're not good at seeing",
  "path": "/devsnoop-browser-access-for-coding-agents/",
  "publishedAt": "2026-04-23T10:22:00.000Z",
  "site": "at://did:plc:bryys25pc2fnagnyxqgsglhd/site.standard.publication/3mn26bjkkmh23",
  "tags": [
    "AI",
    "Tools",
    "Projects"
  ],
  "textContent": "I use coding agents — Claude Code, Codex, Cursor — for most of my development. They're good at reading and writing code. They're not good at seeing what's happening in the browser. The agent generates frontend code and has no way to check if a button is in the right place, if a form submits correctly, or if there's a console error after the page loads.\n\nThe existing options — Chrome's DevTools MCP, its CLI, Browser Tools MCP — all work. But they load dozens of tools into the agent's context, return data the agent has to translate before it can act, and cost more tokens than I'd like for simple tasks. I don't need all the tools they offer. I wanted a small, reliable subset.\n\nSo I built DevSnoop.\n\nWHAT IT DOES\n\nDevSnoop is a Chrome extension that gives coding agents direct access to the browser. The agent sends an HTTP request to localhost:9400, the extension executes on the live page, and structured JSON comes back.\n\ncurl -s -X POST http://127.0.0.1:9400/ \\\n  -H 'Content-Type: application/json' \\\n  -d '{\"command\":\"page_summary\",\"params\":{\"depth\":3}}'\n\nOne HTTP call, structured JSON back. No MCP server, no DevTools protocol.\n\n18 commands — page inspection, click/fill/scroll/hover, console logs, network requests, screenshots, DOM diffing, tech stack detection, accessibility audits. I kept the surface area small on purpose.\n\nWHY NOT THE EXISTING TOOLS?\n\nChrome DevTools MCP loads a large tool definition into the agent's context window. DevSnoop's skill file is a single markdown document with curl examples. The agent learns the full API in one read.\n\nI ran a comparison on a real page — the admin panel of one of my projects. DevSnoop's setup cost was under 2,000 tokens. Chrome DevTools CLI/MCP was closer to 5,000. For the actual task (understanding the page and its interactive elements), DevSnoop returned a compact summary with 30 interactive targets. Chrome DevTools returned a deeper accessibility tree, but at higher token cost.\n\nThen there's actionability. DevSnoop's page_summary returns each interactive element with a CSS selector the agent can pass directly to click or fill:\n\nlabel: \"Refresh Followers\" → selector: \"body > div > button:nth-of-type(2)\"\n\nChrome DevTools returns accessibility-tree nodes. The agent gets a label, but needs an extra step to map it back to something it can interact with. DevSnoop skips that step — the response is already in the shape the agent needs for the next action.\n\nThe tradeoff: Chrome DevTools gives richer semantic understanding of page structure. DevSnoop gives the agent what it needs to act. For my workflow — build something, verify it in the browser, fix what's wrong — acting is what matters.\n\nHOW IT WORKS\n\nThree pieces:\n\n * Chrome extension — runs on the page, executes commands, captures logs and network requests via Chrome's debugger API\n * Native host — a compiled binary (no Node/Bun/npm needed on your machine) that bridges HTTP to Chrome's native messaging\n * Skill file — a markdown doc that teaches the agent all 18 commands with examples\n\nInstall is one line:\n\ncurl -fsSL https://devsnoop.com/install.sh | bash\n\nWorks with any coding agent that can make HTTP requests — Claude Code, Cursor, Windsurf, Cline, Aider. No special integration needed. Chrome-based, so it works with Arc, Brave, and Edge too.\n\nWHAT I USE IT FOR\n\nMostly verification. I make changes, the agent checks the browser to see if they worked. A typical flow:\n\n * page_summary to understand the current state\n * click or fill to interact with something\n * get_logs to check for errors\n * screenshot to see the result\n * diff to track what changed after a hot reload\n\nThe diff command is useful — first call takes a baseline, second call compares against it. The agent can make code changes, wait for hot reload, then check what actually changed in the DOM without re-reading the full page.\n\nPRICING\n\n$29, one-time. Launch pricing. No subscription, no usage limits. Works on macOS and Linux (Windows planned).\n\nDevSnoop is on the Chrome Web Store today.",
  "title": "DevSnoop — Browser Access for Coding Agents"
}