browser-navigate

分类: 工具与效率 | 上传者: franco-bianco | 下载: 0 | 版本: v1.0（最新）

Control Chrome via DevTools MCP to visit pages, interact with elements, and extract content. Use when navigating websites, filling forms, taking screenshots, or automating browser interactions.

更新日志: Source: GitHub https://github.com/franco-bianco/claude-skills

目录结构

当前层级: browser-navigate/

📁 references/
- 📄 tool-loading.md 3.1 KB
- 📄 tool-reference.md 15.5 KB
📄 SKILL.md 5.5 KB

SKILL.md

---
name: browser-navigate
description: Control Chrome via DevTools MCP to visit pages, interact with elements, and extract content. Use when navigating websites, filling forms, taking screenshots, or automating browser interactions.
allowed-tools: mcp__chrome-devtools__*
---

# Browser Navigate

Control Chrome via DevTools MCP to navigate pages, interact with elements, and extract content.

See [tool-reference.md](references/tool-reference.md) for full parameter documentation and [tool-loading.md](references/tool-loading.md) for which tools to load per task.

## Loading Tools

Chrome DevTools tools are deferred — load them via `ToolSearch` before use. Load only what you need for the task:

```text
# Browse and read pages (minimum set)
ToolSearch(query: "select:mcp__chrome-devtools__navigate_page,mcp__chrome-devtools__take_snapshot,mcp__chrome-devtools__click,mcp__chrome-devtools__wait_for,mcp__chrome-devtools__take_screenshot")

# Add form interaction
ToolSearch(query: "select:mcp__chrome-devtools__fill,mcp__chrome-devtools__type_text,mcp__chrome-devtools__press_key")

# Add JavaScript execution
ToolSearch(query: "select:mcp__chrome-devtools__evaluate_script")
```

See [tool-loading.md](references/tool-loading.md) for the full set of task-to-tool mappings.

## Core Workflow

### 1. Navigate to a page

```text
navigate_page(type: "url", url: "https://example.com")
```

### 2. Take a snapshot to see page content and element UIDs

Always take a snapshot before interacting. Snapshots return the accessibility tree with `uid` values for every interactive element.

```text
take_snapshot()
```

### 3. Interact with elements using their UIDs

- **Click**: `click(uid: "e42")`
- **Fill input**: `fill(uid: "e15", value: "search query")`
- **Fill form**: `fill_form(elements: [{uid: "e10", value: "user@example.com"}, {uid: "e12", value: "password"}])`
- **Type text** (into focused element): `type_text(text: "hello")`
- **Press key**: `press_key(key: "Enter")` or `press_key(key: "Control+A")`
- **Hover**: `hover(uid: "e30")`
- **Wait**: `wait_for(text: ["Loading complete", "Results"])`

### 4. Run JavaScript when DOM access is needed

```javascript
evaluate_script(function: "() => { return document.title }")
```

With arguments referencing elements:

```javascript
evaluate_script(function: "(el) => { return el.innerText }", args: ["e42"])
```

### 5. Capture visual state

- **Screenshot**: `take_screenshot()` or with `fullPage: true`
- **Element screenshot**: `take_screenshot(uid: "e42")`
- **Save to file**: `take_screenshot(filePath: "screenshot.png")`

## Network Requests

List and inspect XHR/fetch requests:

```text
list_network_requests(resourceTypes: ["xhr", "fetch"])
get_network_request(reqid: 5)
```

Save response bodies to files:

```text
get_network_request(reqid: 5, responseFilePath: "response.json")
```

Use `includePreservedRequests: true` to keep requests across navigations (last 3).

## API Discovery

Use the browser to discover and test API endpoints before implementing them in Go.

### Finding API endpoints behind UI actions

Capture the API calls a UI action triggers:

```text
# 1. Load network tools
ToolSearch(query: "select:mcp__chrome-devtools__list_network_requests,mcp__chrome-devtools__get_network_request")

# 2. Perform the action in the browser (click, submit, navigate)
click(uid: "e42")
wait_for(text: ["Results"])

# 3. List XHR/fetch requests made during the action
list_network_requests(resourceTypes: ["xhr", "fetch"])

# 4. Inspect the request and response
get_network_request(reqid: 5)

# 5. Save response to file for analysis
get_network_request(reqid: 5, responseFilePath: "response.json")
```

### Capturing redirect chains

Auth flows often involve multiple redirects that set cookies at each hop:

```text
# After completing a login flow, check all requests including preserved ones
list_network_requests(includePreservedRequests: true, resourceTypes: ["document", "xhr", "fetch"])
```

```javascript
// Check where you ended up after redirects
evaluate_script(function: "() => { return window.location.href }")
```

## Multi-Page Management

```text
list_pages()
new_page(url: "https://other-site.com")
select_page(pageId: 2)
close_page(pageId: 2)
```

Use `new_page` with `isolatedContext: "session-name"` for separate cookie/storage contexts.

## Dialog Handling

```text
handle_dialog(action: "accept")
handle_dialog(action: "accept", promptText: "user input")
```

## Reducing Token Usage

- Use `take_snapshot()` with `verbose: false` (default) — verbose mode includes `ignored` nodes.
- Use `includeSnapshot: true` on `click`/`fill`/`hover`/`drag` to get a snapshot in the same response.
- Prefer `take_snapshot` over `take_screenshot` — snapshots are text and contain UIDs for interaction.
- Use `take_screenshot(filePath: "path.png")` to save to disk instead of inline base64.
- Use `list_network_requests(pageSize: N, pageIdx: 0)` for pagination.

## Tips

- Always `take_snapshot` before interacting — UIDs change between navigations.
- Use `wait_for` after navigating or clicking to ensure content has loaded.
- When navigating sites with anti-bot protection, check `list_console_messages()` for errors.
- Use `navigate_page(type: "reload", ignoreCache: true)` for cache-busting reloads.
- Use the browser with PowHTTP proxy running to generate traffic for the network-debug skill.
- Use `evaluate_script` with `window.fetch()` to test endpoint variations in-browser before implementing in Go.
- Check `list_network_requests` after form submissions to see the POST payload format and response shape.

登录后下载/点赞/收藏 ❤ 3 | ★ 0

browser-navigate

目录结构

SKILL.md

举报内容

提示