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.

The 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.

So I built DevSnoop.

What it does

DevSnoop 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.

curl -s -X POST http://127.0.0.1:9400/ \
  -H 'Content-Type: application/json' \
  -d '{"command":"page_summary","params":{"depth":3}}'

One HTTP call, structured JSON back. No MCP server, no DevTools protocol.

18 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.

Why not the existing tools?

Chrome 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.

I 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.

Then there’s actionability. DevSnoop’s page_summary returns each interactive element with a CSS selector the agent can pass directly to click or fill:

label: "Refresh Followers" → selector: "body > div > button:nth-of-type(2)"

Chrome 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.

The 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.

How it works

Three pieces:

  • Chrome extension — runs on the page, executes commands, captures logs and network requests via Chrome’s debugger API
  • Native host — a compiled binary (no Node/Bun/npm needed on your machine) that bridges HTTP to Chrome’s native messaging
  • Skill file — a markdown doc that teaches the agent all 18 commands with examples

Install is one line:

curl -fsSL https://devsnoop.com/install.sh | bash

Works 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.

What I use it for

Mostly verification. I make changes, the agent checks the browser to see if they worked. A typical flow:

  • page_summary to understand the current state
  • click or fill to interact with something
  • get_logs to check for errors
  • screenshot to see the result
  • diff to track what changed after a hot reload

The 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.

Pricing

$29, one-time. Launch pricing. No subscription, no usage limits. Works on macOS and Linux (Windows planned).

DevSnoop is on the Chrome Web Store today.