Browser Navigate

Browser Navigate

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

See tool-reference.md for full parameter documentation and 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:

# 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 for the full set of task-to-tool mappings.

Core Workflow

1. Navigate to a page

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.

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

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

With arguments referencing elements:

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:

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

Save response bodies to files:

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:

# 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:

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

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

Multi-Page Management

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

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.