# Chrome Browser Tools (MCP)

**Read this file when using Chrome browser tools** (`mcp__claude-in-chrome__*`) for testing or debugging the frontend.

## Tool Loading

All Chrome MCP tools are deferred — they must be loaded with `ToolSearch` before first use:

```
ToolSearch query="select:mcp__claude-in-chrome__<tool_name>"
```

Commonly used tools:
- `tabs_context_mcp` — get available tabs (call first in every session)
- `navigate` — go to a URL
- `computer` — screenshots, clicks, keyboard, scrolling, zoom
- `read_page` — accessibility tree of page elements
- `find` — find elements by text/selector
- `javascript_tool` — run JS in the page console
- `form_input` — fill form fields

## Browser Tricks

### Hard Reload (bypass cache)

After rebuilding the frontend bundle (`npm run build`), do a hard reload to bypass browser cache:

```
computer action="key" text="ctrl+shift+r"
```

This is equivalent to Ctrl+Shift+R and forces the browser to re-fetch all resources, ignoring cached versions.

### Zoom into UI regions

Use the `zoom` action to inspect small UI elements (icons, badges, text):

```
computer action="zoom" region=[x0, y0, x1, y1]
```

Coordinates define a rectangle from top-left to bottom-right in viewport pixels.

### Scroll to element

Use `scroll_to` with a `ref` from `read_page` to bring an element into view:

```
computer action="scroll_to" ref="ref_123"
```

### Console messages

Use `read_console_messages` to check for JS errors after page load or interactions.

### Network requests

Use `read_network_requests` to inspect API calls, check response codes, and debug loading issues.

## Typical Verification Workflow

1. Rebuild bundle: `npm run build` (from `server/` directory)
2. Hard reload: `ctrl+shift+r`
3. Take screenshot to verify visual changes
4. Zoom into specific regions if needed
5. Check console for errors