# DevSnoop

DevSnoop stops coding agents from guessing what they see in Chrome. It gives agents browser control through a Chrome extension and local native host, so they can inspect pages, interact with UI, capture screenshots, read console/network errors, run heuristic legibility audits for hard-to-read text and icons, and verify changes using a compact HTTP JSON API.

## Core Use Cases

### Page Inspection

- Summarize semantic page structure with stable selectors
- Inspect individual elements with HTML subtree and computed styles
- Find elements by selector or text
- Detect frontend frameworks, libraries, CMSs, analytics, basic accessibility issues, and hard-to-read text or icons

### Page Interaction

- Click elements by selector, text, or coordinates
- Fill form fields by selector or matched text
- Scroll and hover
- Open tabs, list tabs, and navigate existing tabs

### Debugging and Verification

- Capture screenshots to local files
- Read console logs, JavaScript exceptions, and network activity
- Compare lightweight DOM/style snapshots after code or UI changes
- Help coding agents verify frontend work without raw browser protocol output
- Close the frontend loop before editing: page summary, user action, network/log evidence, DOM diff, and screenshot only when visual state matters

### Multiple Chrome Profiles

- Label each Chrome profile in the DevSnoop extension popup
- List connected profiles and select the browser context an agent should control
- Keep separate logins, sites, and test accounts isolated in their own profiles
- Target one request by connection ID without changing the default profile

## How It Works

1. Install the DevSnoop Chrome extension.
2. Install the DevSnoop native host binary.
3. Configure the coding agent with DevSnoop's SKILL.md.
4. The agent sends HTTP requests to `http://127.0.0.1:9400/`.
5. The native host forwards commands to Chrome via Native Messaging.
6. The extension runs commands in the browser and returns structured JSON.

When multiple Chrome profiles are open, one local native host endpoint brokers their extension connections. Profile labels are optional, and single-profile use works without configuration.

## API

All commands use:

`POST http://127.0.0.1:9400/`

With JSON:

`{"command":"<command>","params":{...},"tabID":<optional>}`

### Commands

- `list_tabs`: get open tabs with IDs, URLs, titles, and active state
- `open_tab`: open a new tab and optionally navigate to a URL
- `navigate`: navigate an existing tab
- `close_tab`: close an existing tab by ID, or the active tab if tabID is omitted
- `page_summary`: return semantic DOM structure and interactive elements
- `inspect_element`: return one element's subtree and computed styles
- `find`: find elements by CSS selector or text content
- `tech_stack`: detect frameworks, libraries, analytics, CMSs, and tools
- `accessibility_audit`: run basic accessibility checks
- `legibility_audit`: run a heuristic visual QA pass for hard-to-read text and icons, including weak contrast, tiny text, clipping, low-contrast icons, and text over images or gradients. It returns verified selector/location/evidence/fix guidance, includes class/HTML snippet evidence for icons, and is not accessibility certification.
- `screenshot`: capture a tab or element screenshot to a local file
- `click`: click an element by selector, text, or coordinates
- `fill`: fill a form input or textarea
- `scroll`: scroll the page or an element
- `hover`: hover an element
- `get_logs`: retrieve console logs and JavaScript errors
- `get_network`: retrieve network requests and responses, with opt-in redacted request/response bodies
- `diff`: compare current page state against the previous snapshot
- `get_storage`: inspect browser storage values for the page, redacting sensitive-looking values by default
- `ping`: verify host, extension, license, and 24h preview state
- `list_connections`: list connected Chrome profiles with stable profile IDs and optional user labels
- `select_connection`: choose the default Chrome profile for later commands

Use a top-level `connectionID` to target one request without changing the selected connection.

Recommended agent flow:

1. Call `ping` before other commands.
2. If `license.activated` is `true`, continue normally.
3. If `license.activated` is `false` and `preview.active` is `true`, continue normally until `preview.expiresAt`; the 24h preview allows all commands.
4. If `license.activated` is `false` and `preview.reason` is `not_started`, ask the user to open the DevSnoop extension popup and click Start preview.
5. If `license.activated` is `false` and `preview.reason` is `expired`, ask the user to buy or activate a license.

## Installation

Chrome extension:

`https://chromewebstore.google.com/detail/devsnoop/kkhkcpgpklnofjgnflkciekppiokdilp?utm_source=devsnoop.com&utm_medium=llms_txt&utm_campaign=cws_install&utm_content=install_docs`

Native host:

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

Downloads:

- `https://devsnoop.com/downloads/latest/devsnoop-host-darwin-arm64`
- `https://devsnoop.com/downloads/latest/devsnoop-host-darwin-x64`
- `https://devsnoop.com/downloads/latest/devsnoop-host-linux-x64`
- `https://devsnoop.com/downloads/latest/devsnoop-host-linux-arm64`
- `https://devsnoop.com/downloads/latest/SKILL.md`

## Pricing

DevSnoop is a one-time purchase. It has no subscription, request metering, usage limit, or seat limit. Purchase includes 1 year of updates.

## Privacy

DevSnoop runs locally. The Chrome extension communicates with the native host on the user's machine. Page data is not sent to DevSnoop servers.

License verification uses `https://backend.devsnoop.com/verify`. An optional profile label and stable profile ID stay in that Chrome profile's local extension storage. Sanitized native-host disconnect diagnostics may be sent to the backend; they exclude raw errors, paths, profile labels, page data, and tab data.

## Public Pages

- `https://devsnoop.com/`
- `https://devsnoop.com/install`
- `https://devsnoop.com/demo`
- `https://devsnoop.com/docs`
- `https://devsnoop.com/pricing`
- `https://devsnoop.com/browse-dev-alternative`
- `https://devsnoop.com/chrome-devtools-mcp-alternative`
- `https://devsnoop.com/localhost-is-not-a-security-boundary`
- `https://devsnoop.com/the-difference-between-debugging-the-request-and-debugging-the-feature`
- `https://devsnoop.com/capture-fetch-request-body`
- `https://devsnoop.com/closing-the-frontend-loop-for-coding-agents`
- `https://devsnoop.com/do-har-files-contain-sensitive-information`
- `https://devsnoop.com/tools/har-analyzer`
- `https://devsnoop.com/tools/xpath-tester`
- `https://devsnoop.com/faq`
- `https://devsnoop.com/privacy`

## About

DevSnoop is built by Hwee-Boon Yar, a solo indie developer who has been writing and delivering software for 30 years.

## Contact

- Email: hboon@devsnoop.com
- Site: https://hboon.com/
- X/Twitter: https://x.com/hboon
- Bluesky: https://bsky.app/profile/hboon.com