DevSnoopDevSnoop

What You Can Do with DevSnoop

Your coding agent controls a real Chrome browser — inspect pages, fill forms, catch errors, and verify changes. Just describe what you want.

DevSnoop ships with a SKILL.md file that teaches your agent every command. You write prompts, the agent handles the rest.

Add to Chrome

Multiple Chrome profiles

Keep every browser context distinct

Open the DevSnoop popup in each Chrome profile and give it a label such as Normal or SeatPlanMaker PostHog. Your agent can list the connected profiles, select one, and work only with the tabs and logged-in sites in that profile.

bash
# See every connected Chrome profile
curl -s -X POST http://127.0.0.1:9400/ \
  -H 'Content-Type: application/json' \
  -d '{"command":"list_connections","params":{}}'

# Choose the default profile for later commands
curl -s -X POST http://127.0.0.1:9400/ \
  -H 'Content-Type: application/json' \
  -d '{"command":"select_connection","params":{"connectionID":"native-123-example"}}'

Labels are optional. With one Chrome profile, DevSnoop works as before. Each installation also has a stable local profile ID, so agents can distinguish profiles even when you do not add a label. Add a top-level connectionID to target one request without changing the selected profile.

Agent loop recipe

Inspect, act, verify, then edit

Use this when the agent is about to change frontend code. The point is to collect browser evidence from the local Chrome tab before opening files.

  1. 1 Start with page_summary so the agent sees current text, controls, regions, selectors, and tab context.
  2. 2 Reproduce the user path with click, fill, scroll, or hover.
  3. 3 Read get_network and get_logs. Include redacted bodies only when payloads matter.
  4. 4 Run diff after the action or hot reload so the agent checks what the page did, not just what the code says.
  5. 5 Use screenshot when visual state matters: layout, clipping, contrast, modal position, or review evidence.
  6. 6 Then edit. If the evidence points to a request, fix request code. If it points to state or rendering, fix the feature.
You: "Before editing, close the browser loop: page_summary, reproduce the flow, get_network, get_logs, diff, and screenshot only if the visible state matters. Then tell me which file you will edit and why."

Workflows

Tell your agent what you need. It picks the right commands automatically.

Inspect a page you're building

The agent finds the tab, reads the page structure, and checks for console errors — all in one go.

You: "Check my local app. What does the page look like, and are there any errors?"

Test a form interaction

The agent finds inputs by label, fills them, clicks submit, and reports back any errors.

You: "Fill in the signup form with test data and submit it. Let me know if anything breaks."

Verify visual changes after code edits

The agent snapshots the page before your change, waits for hot-reload, then diffs to show exactly what shifted.

You: "Take a snapshot of the page, then after I change the header styles, tell me what changed."

Debug a failing API call

The agent watches network requests and console output, filters for errors, and can include redacted request or response bodies when payloads matter.

You: "Something's broken on the dashboard — check for failed network requests and JS errors."

Collect a debug bundle before editing

The agent reads the page, reproduces the bug, checks network failures and console logs, diffs the DOM, then captures a screenshot only when visual state matters.

You: "Before editing, collect a compact debug bundle: page summary, reproduce the issue, network, logs, diff, and screenshot only if needed."

Grab a screenshot for review

The agent captures any tab — even background ones — and saves it locally for you or itself to review.

You: "Screenshot the current page so you can see what I'm looking at."

Good to Know

  • - Your agent gets structured data back — no raw HTML, minimal tokens.
  • - The agent uses page_summary as its starting point — it returns selectors the agent passes directly to other commands.
  • - Console logs and network requests are captured automatically when the agent starts debugging. Logs buffer up to 200 entries. Network bodies are opt-in and redacted by default.
  • - First time on a site? Click the DevSnoop extension icon to grant access. One-time per origin.

Base Request

Every command is a POST to the same endpoint. Use tabID to target a specific tab, or omit it for the active tab.

bash
curl -s -X POST http://127.0.0.1:9400/ \
  -H 'Content-Type: application/json' \
  -d '{"command":"<command>","params":{...},"tabID":<optional>}'

Tab Management

Page Inspection

Page Interactions

Debugging

Change Detection

Health Check