Back to Details

chrome-devtools-cli

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Chrome DevTools CLI

Chrome DevTools CLI

Skill by ara.so — Devtools Skills collection.
Chrome DevTools CLI is a lightweight Rust binary that connects directly to an existing Chrome browser via the DevTools Protocol. It auto-connects to your Chrome instance, requires no separate browser process, and provides a minimal-context alternative to MCP-based browser automation.
由ara.so提供的技能——Devtools技能合集。
Chrome DevTools CLI是一款轻量级Rust二进制工具，可通过DevTools Protocol直接连接到已运行的Chrome浏览器。它能自动连接到你的Chrome实例，无需单独启动浏览器进程，是基于MCP的浏览器自动化方案之外的轻量替代选择。

Why Use This

为什么选择它

  • Zero context overhead: One command in, one result out. No MCP layer, no large protocol payloads
  • Uses your Chrome: Works with your existing browser session, credentials, and extensions
  • Persistent connection: Background daemon keeps WebSocket open, browser prompts for access only once
  • Deterministic targeting: Friendly target names (
    [target:red-snake]
    ) for reliable multi-page workflows
  • 零上下文开销：输入一条命令，得到一个结果。无需MCP层，无需庞大的协议负载
  • 复用现有Chrome：可使用你当前的浏览器会话、凭据和扩展程序
  • 持久连接：后台守护进程保持WebSocket连接，浏览器仅需一次授权提示
  • 确定性目标定位：友好的目标名称（如
    [target:red-snake]
    ），支持可靠的多页面工作流

Installation

安装

bash
undefined
bash
undefined

macOS (recommended)

macOS（推荐）

brew install aeroxy/tap/chrome-devtools
brew install aeroxy/tap/chrome-devtools

Or via Cargo

或通过Cargo安装

cargo install chrome-devtools-cli

The binary is named `chrome-devtools`.
cargo install chrome-devtools-cli

二进制文件名为`chrome-devtools`。

Prerequisites

前置条件

Enable Chrome remote debugging:
  1. Open Chrome
  2. Navigate to 
    chrome://inspect/#remote-debugging
  3. Enable the remote debugging server
启用Chrome远程调试：
  1. 打开Chrome浏览器
  2. 访问
    chrome://inspect/#remote-debugging
  3. 启用远程调试服务器

Auto-Connect Behavior

自动连接机制

The CLI automatically discovers Chrome's WebSocket endpoint by reading 
DevToolsActivePort
from:
  • macOS: 
    ~/Library/Application Support/Google/Chrome/
  • Linux: 
    ~/.config/google-chrome/
  • Windows: 
    %LOCALAPPDATA%\Google\Chrome\User Data\
Override with environment variables or flags:
bash
undefined
CLI会通过读取
DevToolsActivePort
文件自动发现Chrome的WebSocket端点，文件路径如下：
  • macOS：
    ~/Library/Application Support/Google/Chrome/
  • Linux：
    ~/.config/google-chrome/
  • Windows：
    %LOCALAPPDATA%\Google\Chrome\User Data\
可通过环境变量或命令行参数覆盖默认设置：
bash
undefined

Environment variables

环境变量

export CHROME_WS_ENDPOINT=ws://localhost:9222/devtools/browser/abc123 export CHROME_USER_DATA_DIR=~/custom-chrome-profile export CHROME_CHANNEL=beta # stable, beta, canary, dev
export CHROME_WS_ENDPOINT=ws://localhost:9222/devtools/browser/abc123 export CHROME_USER_DATA_DIR=~/custom-chrome-profile export CHROME_CHANNEL=beta # stable、beta、canary、dev

Or flags

或命令行参数

chrome-devtools --ws-endpoint ws://localhost:9222/... navigate https://example.com chrome-devtools --user-data-dir ~/custom-profile navigate https://example.com chrome-devtools --channel canary navigate https://example.com
undefined
chrome-devtools --ws-endpoint ws://localhost:9222/... navigate https://example.com chrome-devtools --user-data-dir ~/custom-profile navigate https://example.com chrome-devtools --channel canary navigate https://example.com
undefined

Daemon Architecture

守护进程架构

First command spawns a background daemon that:
  • Connects to Chrome WebSocket (one-time approval prompt)
  • Listens on Unix socket: 
    /tmp/chrome-devtools-daemon.sock
  • Auto-exits after 5 minutes of inactivity
  • All subsequent commands reuse the persistent connection
Kill manually: 
pkill -f __daemon__
or delete the socket file.
首次执行命令时会启动后台守护进程，该进程：
  • 连接到Chrome WebSocket（仅需一次授权提示）
  • 监听Unix套接字：
    /tmp/chrome-devtools-daemon.sock
  • 5分钟无活动后自动退出
  • 后续所有命令复用该持久连接
手动终止守护进程：
pkill -f __daemon__
或删除套接字文件。

Page Targeting Pattern

页面目标定位模式

CRITICAL: Always capture and reuse the 
[target:name]
from navigation commands.
bash
undefined
重要提示：始终捕获并复用导航命令返回的
[target:name]
。
bash
undefined

Step 1: Navigate and capture target name

步骤1：导航并捕获目标名称

chrome-devtools navigate https://github.com
chrome-devtools navigate https://github.com

Output: Navigated to https://github.com

输出：Navigated to https://github.com

[target:green-dog]

[target:green-dog]

Step 2: Pin all subsequent commands to this target

步骤2：将后续所有命令绑定到该目标

chrome-devtools --target green-dog screenshot --output /tmp/gh.png chrome-devtools --target green-dog evaluate "document.title" chrome-devtools --target green-dog click "a[href='/login']"

Without `--target`, commands default to page index 0, which may change as Chrome reorders tabs.
chrome-devtools --target green-dog screenshot --output /tmp/gh.png chrome-devtools --target green-dog evaluate "document.title" chrome-devtools --target green-dog click "a[href='/login']"

若不指定`--target`，命令默认指向页面索引0，但Chrome可能会重新排列标签页，导致索引变化。

List All Pages

列出所有页面

bash
chrome-devtools list-pages
bash
chrome-devtools list-pages

Output:

输出：

[0] (green-dog) GitHub — https://github.com

[0] (green-dog) GitHub — https://github.com

[1] (red-snake) Example Domain — https://example.com

[1] (red-snake) Example Domain — https://example.com

[2] (bold-stag) Local Dev — https://localhost:3000

[2] (bold-stag) Local Dev — https://localhost:3000


You can also use `--page <index>` for quick one-offs:

```bash
chrome-devtools --page 1 evaluate "window.location.href"

也可使用`--page <index>`快速执行一次性操作：

```bash
chrome-devtools --page 1 evaluate "window.location.href"

Core Commands

核心命令

Navigation

导航

bash
undefined
bash
undefined

Navigate to URL (waits for load event)

导航至指定URL（等待加载事件完成）

chrome-devtools navigate https://example.com
chrome-devtools navigate https://example.com

History navigation

历史记录导航

chrome-devtools --target red-snake navigate --back chrome-devtools --target red-snake navigate --forward chrome-devtools --target red-snake navigate --reload
chrome-devtools --target red-snake navigate --back chrome-devtools --target red-snake navigate --forward chrome-devtools --target red-snake navigate --reload

Tab management

标签页管理

chrome-devtools new-page https://github.com chrome-devtools close-page 2 chrome-devtools select-page 0 # Bring tab to front
undefined
chrome-devtools new-page https://github.com chrome-devtools close-page 2 chrome-devtools select-page 0 # 将标签页置于前台
undefined

Inspection

检查

bash
undefined
bash
undefined

Screenshot (viewport only)

截图（仅视口区域）

chrome-devtools --target green-dog screenshot --output /tmp/page.png
chrome-devtools --target green-dog screenshot --output /tmp/page.png

Full-page screenshot (scrollable area)

全页截图（可滚动区域）

chrome-devtools --target green-dog screenshot --full-page --output /tmp/full.png
chrome-devtools --target green-dog screenshot --full-page --output /tmp/full.png

JavaScript evaluation

JavaScript代码执行

chrome-devtools --target green-dog evaluate "document.title" chrome-devtools --target green-dog evaluate "Array.from(document.querySelectorAll('h1')).map(h => h.textContent)"
chrome-devtools --target green-dog evaluate "document.title" chrome-devtools --target green-dog evaluate "Array.from(document.querySelectorAll('h1')).map(h => h.textContent)"

Handle JavaScript dialogs (alert/confirm/prompt)

处理JavaScript对话框（alert/confirm/prompt）

chrome-devtools --target green-dog evaluate "confirm('Proceed?')" --dialog-action accept chrome-devtools --target green-dog evaluate "prompt('Name?')" --dialog-action "John Doe"
chrome-devtools --target green-dog evaluate "confirm('Proceed?')" --dialog-action accept chrome-devtools --target green-dog evaluate "prompt('Name?')" --dialog-action "John Doe"

Accessibility tree snapshot

无障碍树快照

chrome-devtools --target green-dog snapshot
undefined
chrome-devtools --target green-dog snapshot
undefined

Interaction

交互

bash
undefined
bash
undefined

Click by CSS selector

通过CSS选择器点击元素

chrome-devtools --target green-dog click "#submit-button" chrome-devtools --target green-dog click "a[href='/login']"
chrome-devtools --target green-dog click "#submit-button" chrome-devtools --target green-dog click "a[href='/login']"

Click at coordinates

按坐标点击

chrome-devtools --target green-dog click-at 100 200
chrome-devtools --target green-dog click-at 100 200

Fill input fields

填充输入字段

chrome-devtools --target green-dog fill "#email" "user@example.com" chrome-devtools --target green-dog fill "#password" "secret123"
chrome-devtools --target green-dog fill "#email" "user@example.com" chrome-devtools --target green-dog fill "#password" "secret123"

Fill dropdown (select element)

填充下拉菜单（select元素）

chrome-devtools --target green-dog fill "#country" "United States"
chrome-devtools --target green-dog fill "#country" "United States"

Toggle checkbox/radio

切换复选框/单选框

chrome-devtools --target green-dog fill "#terms" "true" chrome-devtools --target green-dog fill "#newsletter" "false"
chrome-devtools --target green-dog fill "#terms" "true" chrome-devtools --target green-dog fill "#newsletter" "false"

Type text into focused element

向聚焦元素输入文本

chrome-devtools --target green-dog type-text "Hello World" chrome-devtools --target green-dog type-text "Search query" --submit-key Enter
chrome-devtools --target green-dog type-text "Hello World" chrome-devtools --target green-dog type-text "Search query" --submit-key Enter

Press keys

按键操作

chrome-devtools --target green-dog press-key Enter chrome-devtools --target green-dog press-key "Control+A" chrome-devtools --target green-dog press-key Escape
chrome-devtools --target green-dog press-key Enter chrome-devtools --target green-dog press-key "Control+A" chrome-devtools --target green-dog press-key Escape

Hover over element

悬停在元素上

chrome-devtools --target green-dog hover ".dropdown-menu"
undefined
chrome-devtools --target green-dog hover ".dropdown-menu"
undefined

Viewport & Waiting

视口与等待

bash
undefined
bash
undefined

Resize viewport

调整视口大小

chrome-devtools --target green-dog resize 1920 1080
chrome-devtools --target green-dog resize 1920 1080

Wait for text to appear (default 30s timeout)

等待文本出现（默认超时30秒）

chrome-devtools --target green-dog wait-for "Login successful" chrome-devtools --target green-dog wait-for "Dashboard" --timeout 60000
undefined
chrome-devtools --target green-dog wait-for "Login successful" chrome-devtools --target green-dog wait-for "Dashboard" --timeout 60000
undefined

Third-Party Developer Tools

第三方开发者工具

For pages that inject custom DevTools via 
window.__dtmcp
:
bash
undefined
对于通过
window.__dtmcp
注入自定义DevTools的页面：
bash
undefined

List available custom tools

列出可用的自定义工具

chrome-devtools --target green-dog list-3p-tools
chrome-devtools --target green-dog list-3p-tools

Execute custom tool

执行自定义工具

chrome-devtools --target green-dog execute-3p-tool "myTool" '{"param": "value"}'
undefined
chrome-devtools --target green-dog execute-3p-tool "myTool" '{"param": "value"}'
undefined

JSON Output Mode

JSON输出模式

Add 
--json
to any command for machine-readable output:
bash
chrome-devtools --json --target green-dog evaluate "document.title"
在任意命令后添加
--json
参数，可获取机器可读的输出：
bash
chrome-devtools --json --target green-dog evaluate "document.title"

{"success": true, "result": "Example Domain"}

{"success": true, "result": "Example Domain"}

chrome-devtools --json list-pages
chrome-devtools --json list-pages

{"success": true, "pages": [{"index": 0, "friendlyName": "green-dog", ...}]}

{"success": true, "pages": [{"index": 0, "friendlyName": "green-dog", ...}]}

undefined
undefined

Real-World Workflows

实际工作流示例

Automated Form Submission

自动表单提交

bash
#!/bin/bash
set -e
bash
#!/bin/bash
set -e

Navigate and capture target

导航并捕获目标

TARGET=$(chrome-devtools navigate https://example.com/form | grep -oP '(?<=target:)[a-z-]+')
TARGET=$(chrome-devtools navigate https://example.com/form | grep -oP '(?<=target:)[a-z-]+')

Fill form fields

填充表单字段

chrome-devtools --target "$TARGET" fill "#name" "Alice Smith" chrome-devtools --target "$TARGET" fill "#email" "alice@example.com" chrome-devtools --target "$TARGET" fill "#country" "Canada" chrome-devtools --target "$TARGET" fill "#terms" "true"
chrome-devtools --target "$TARGET" fill "#name" "Alice Smith" chrome-devtools --target "$TARGET" fill "#email" "alice@example.com" chrome-devtools --target "$TARGET" fill "#country" "Canada" chrome-devtools --target "$TARGET" fill "#terms" "true"

Submit and wait for confirmation

提交并等待确认

chrome-devtools --target "$TARGET" click "#submit" chrome-devtools --target "$TARGET" wait-for "Thank you" --timeout 10000
chrome-devtools --target "$TARGET" click "#submit" chrome-devtools --target "$TARGET" wait-for "Thank you" --timeout 10000

Capture confirmation screenshot

捕获确认页面截图

chrome-devtools --target "$TARGET" screenshot --output /tmp/confirmation.png
undefined
chrome-devtools --target "$TARGET" screenshot --output /tmp/confirmation.png
undefined

Data Extraction

数据提取

bash
#!/bin/bash
TARGET=$(chrome-devtools navigate https://news.ycombinator.com | grep -oP '(?<=target:)[a-z-]+')
bash
#!/bin/bash
TARGET=$(chrome-devtools navigate https://news.ycombinator.com | grep -oP '(?<=target:)[a-z-]+')

Extract top stories

提取顶部文章

chrome-devtools --target "$TARGET" evaluate " Array.from(document.querySelectorAll('.athing')).slice(0, 5).map(item => ({ title: item.querySelector('.titleline > a').textContent, url: item.querySelector('.titleline > a').href })) " --json > /tmp/hn-stories.json
cat /tmp/hn-stories.json
undefined
chrome-devtools --target "$TARGET" evaluate " Array.from(document.querySelectorAll('.athing')).slice(0, 5).map(item => ({ title: item.querySelector('.titleline > a').textContent, url: item.querySelector('.titleline > a').href })) " --json > /tmp/hn-stories.json
cat /tmp/hn-stories.json
undefined

Multi-Page Session

多页面会话

bash
#!/bin/bash
bash
#!/bin/bash

Open multiple pages

打开多个页面

TARGET_HOME=$(chrome-devtools navigate https://github.com | grep -oP '(?<=target:)[a-z-]+') TARGET_REPO=$(chrome-devtools new-page https://github.com/torvalds/linux | grep -oP '(?<=target:)[a-z-]+')
TARGET_HOME=$(chrome-devtools navigate https://github.com | grep -oP '(?<=target:)[a-z-]+') TARGET_REPO=$(chrome-devtools new-page https://github.com/torvalds/linux | grep -oP '(?<=target:)[a-z-]+')

Interact with different pages

与不同页面交互

chrome-devtools --target "$TARGET_HOME" click "a[href='/login']" chrome-devtools --target "$TARGET_REPO" evaluate "document.querySelector('.repository-content').textContent.includes('Linux kernel')"
chrome-devtools --target "$TARGET_HOME" click "a[href='/login']" chrome-devtools --target "$TARGET_REPO" evaluate "document.querySelector('.repository-content').textContent.includes('Linux kernel')"

Screenshot both

为两个页面截图

chrome-devtools --target "$TARGET_HOME" screenshot --output /tmp/home.png chrome-devtools --target "$TARGET_REPO" screenshot --output /tmp/repo.png
undefined
chrome-devtools --target "$TARGET_HOME" screenshot --output /tmp/home.png chrome-devtools --target "$TARGET_REPO" screenshot --output /tmp/repo.png
undefined

Accessibility Audit

无障碍审计

bash
#!/bin/bash
TARGET=$(chrome-devtools navigate https://example.com | grep -oP '(?<=target:)[a-z-]+')
bash
#!/bin/bash
TARGET=$(chrome-devtools navigate https://example.com | grep -oP '(?<=target:)[a-z-]+')

Get full accessibility tree

获取完整无障碍树

chrome-devtools --target "$TARGET" snapshot > /tmp/a11y-tree.txt
chrome-devtools --target "$TARGET" snapshot > /tmp/a11y-tree.txt

Check for specific roles

检查特定角色数量

chrome-devtools --target "$TARGET" evaluate " document.querySelectorAll('[role="button"]').length "
chrome-devtools --target "$TARGET" evaluate " document.querySelectorAll('[role="button"]').length "

Find missing alt text

查找缺少alt文本的图片

chrome-devtools --target "$TARGET" evaluate " Array.from(document.querySelectorAll('img:not([alt])')).map(img => img.src) "
undefined
chrome-devtools --target "$TARGET" evaluate " Array.from(document.querySelectorAll('img:not([alt])')).map(img => img.src) "
undefined

Common Patterns for AI Agents

AI Agent通用模式

1. Always Capture Target Names

1. 始终捕获目标名称

bash
undefined
bash
undefined

❌ BAD: Target may change

❌ 错误：目标可能发生变化

chrome-devtools navigate https://example.com chrome-devtools screenshot --output /tmp/page.png # Might screenshot wrong page!
chrome-devtools navigate https://example.com chrome-devtools screenshot --output /tmp/page.png # 可能会截取错误页面！

✅ GOOD: Explicit target

✅ 正确：显式指定目标

TARGET=$(chrome-devtools navigate https://example.com | grep -oP '(?<=target:)[a-z-]+') chrome-devtools --target "$TARGET" screenshot --output /tmp/page.png
undefined
TARGET=$(chrome-devtools navigate https://example.com | grep -oP '(?<=target:)[a-z-]+') chrome-devtools --target "$TARGET" screenshot --output /tmp/page.png
undefined

2. Understand the Page First

2. 先了解页面结构

bash
undefined
bash
undefined

Get context before interacting

交互前获取页面上下文

chrome-devtools --target "$TARGET" snapshot # See accessible structure chrome-devtools --target "$TARGET" screenshot --output /tmp/context.png chrome-devtools --target "$TARGET" evaluate "document.body.innerText" # Read visible text
undefined
chrome-devtools --target "$TARGET" snapshot # 查看无障碍结构 chrome-devtools --target "$TARGET" screenshot --output /tmp/context.png chrome-devtools --target "$TARGET" evaluate "document.body.innerText" # 读取可见文本
undefined

3. Wait for Dynamic Content

3. 等待动态内容加载

bash
undefined
bash
undefined

Don't assume instant rendering

不要假设页面会立即渲染完成

chrome-devtools --target "$TARGET" click "#load-more" chrome-devtools --target "$TARGET" wait-for "Showing 20 results" --timeout 5000 chrome-devtools --target "$TARGET" evaluate "document.querySelectorAll('.result-item').length"
undefined
chrome-devtools --target "$TARGET" click "#load-more" chrome-devtools --target "$TARGET" wait-for "Showing 20 results" --timeout 5000 chrome-devtools --target "$TARGET" evaluate "document.querySelectorAll('.result-item').length"
undefined

4. Handle Errors Gracefully

4. 优雅处理错误

bash
undefined
bash
undefined

Check page state before interaction

交互前检查页面状态

HAS_BUTTON=$(chrome-devtools --target "$TARGET" evaluate "!!document.querySelector('#submit')" --json | jq -r '.result')
if [ "$HAS_BUTTON" = "true" ]; then chrome-devtools --target "$TARGET" click "#submit" else echo "Submit button not found" fi
undefined
HAS_BUTTON=$(chrome-devtools --target "$TARGET" evaluate "!!document.querySelector('#submit')" --json | jq -r '.result')
if [ "$HAS_BUTTON" = "true" ]; then chrome-devtools --target "$TARGET" click "#submit" else echo "未找到提交按钮" fi
undefined

Troubleshooting

故障排除

"Could not connect to Chrome"

"无法连接到Chrome"

  • Ensure Chrome is running
  • Verify remote debugging is enabled at 
    chrome://inspect/#remote-debugging
  • Check 
    DevToolsActivePort
    exists in user data directory
  • Try explicit WebSocket: 
    chrome-devtools --ws-endpoint ws://localhost:9222/... navigate https://example.com
  • 确保Chrome浏览器正在运行
  • 确认已在
    chrome://inspect/#remote-debugging
    启用远程调试
  • 检查用户数据目录中是否存在
    DevToolsActivePort
    文件
  • 尝试显式指定WebSocket端点：
    chrome-devtools --ws-endpoint ws://localhost:9222/... navigate https://example.com

"Daemon connection failed"

"守护进程连接失败"

bash
undefined
bash
undefined

Kill stale daemon

终止僵死的守护进程

pkill -f daemon rm /tmp/chrome-devtools-daemon.sock
pkill -f daemon rm /tmp/chrome-devtools-daemon.sock

Retry command (will spawn fresh daemon)

重试命令（会启动新的守护进程）

chrome-devtools navigate https://example.com
undefined
chrome-devtools navigate https://example.com
undefined

"Element not found" on click/fill

"点击/填充时找不到元素"

bash
undefined
bash
undefined

Verify element exists

验证元素是否存在

chrome-devtools --target "$TARGET" evaluate "!!document.querySelector('#my-button')"
chrome-devtools --target "$TARGET" evaluate "!!document.querySelector('#my-button')"

Get all matching elements

获取匹配元素的数量

chrome-devtools --target "$TARGET" evaluate "document.querySelectorAll('#my-button').length"
chrome-devtools --target "$TARGET" evaluate "document.querySelectorAll('#my-button').length"

Wait for element to appear

等待元素出现

chrome-devtools --target "$TARGET" wait-for "Submit" --timeout 10000 chrome-devtools --target "$TARGET" click "#submit"
undefined
chrome-devtools --target "$TARGET" wait-for "Submit" --timeout 10000 chrome-devtools --target "$TARGET" click "#submit"
undefined

Target name confusion

目标名称混淆

bash
undefined
bash
undefined

List all pages with friendly names

列出所有页面及友好名称

chrome-devtools list-pages
chrome-devtools list-pages

Use explicit page index if needed

必要时使用显式页面索引

chrome-devtools --page 0 evaluate "document.title"
chrome-devtools --page 0 evaluate "document.title"

Or use raw target ID (from list-pages output)

或使用原始目标ID（来自list-pages输出）

chrome-devtools --target "E4F5A6B7C8D9" evaluate "document.title"
undefined
chrome-devtools --target "E4F5A6B7C8D9" evaluate "document.title"
undefined

Best Practices for AI Agents

AI Agent最佳实践

  1. Always use 
    --target
     after initial navigation
  2. Capture screenshots before and after interactions for debugging
  3. Use 
    snapshot
     to understand page structure before clicking
  4. Wait for content instead of assuming instant load
  5. Verify elements exist before interaction
  6. Use JSON output (
    --json
    ) for programmatic parsing
  7. Check 
    list-pages
     when multi-page workflows get confusing
  8. Kill daemon between unrelated sessions to avoid stale connections
  1. 导航后始终使用
    --target
  2. 交互前后截图用于调试
  3. **使用
    snapshot
    **在点击前了解页面结构
  4. 等待内容加载而非假设立即完成
  5. 交互前验证元素存在
  6. 使用JSON输出（
    --json
    ）以便程序化解析
  7. 多页面工作流混乱时检查
    list-pages
  8. 无关会话之间终止守护进程避免连接失效

Integration with AI Coding Agents

与AI编码Agent集成

When helping a user automate Chrome:
  1. Install 
    chrome-devtools-cli
    if not present
  2. Verify Chrome remote debugging is enabled
  3. Start with 
    navigate
    and capture the target name
  4. Use 
    snapshot
    or 
    screenshot
    to understand the page
  5. Perform interactions with explicit 
    --target
  6. Extract results with 
    evaluate
    and 
    --json
  7. Clean up with 
    close-page
    if needed
Example agent workflow:
bash
undefined
当帮助用户自动化Chrome操作时：
  1. 若未安装则安装
    chrome-devtools-cli
  2. 验证Chrome远程调试已启用
  3. 执行
    navigate
    命令并捕获目标名称
  4. 使用
    snapshot
    或
    screenshot
    了解页面结构
  5. 显式指定
    --target
    执行交互操作
  6. 使用
    evaluate
    和
    --json
    提取结果
  7. 必要时使用
    close-page
    清理
Agent工作流示例：
bash
undefined

User: "Login to example.com with my credentials"

用户："使用我的凭据登录example.com"

1. Navigate

1. 导航到登录页

TARGET=$(chrome-devtools navigate https://example.com/login | grep -oP '(?<=target:)[a-z-]+')
TARGET=$(chrome-devtools navigate https://example.com/login | grep -oP '(?<=target:)[a-z-]+')

2. Understand page

2. 了解页面结构

chrome-devtools --target "$TARGET" snapshot | head -50
chrome-devtools --target "$TARGET" snapshot | head -50

3. Fill credentials (from env vars)

3. 填充凭据（来自环境变量）

chrome-devtools --target "$TARGET" fill "#username" "$EXAMPLE_USERNAME" chrome-devtools --target "$TARGET" fill "#password" "$EXAMPLE_PASSWORD"
chrome-devtools --target "$TARGET" fill "#username" "$EXAMPLE_USERNAME" chrome-devtools --target "$TARGET" fill "#password" "$EXAMPLE_PASSWORD"

4. Submit

4. 提交表单

chrome-devtools --target "$TARGET" click "#login-button"
chrome-devtools --target "$TARGET" click "#login-button"

5. Verify success

5. 验证登录成功

chrome-devtools --target "$TARGET" wait-for "Dashboard" --timeout 10000 chrome-devtools --target "$TARGET" screenshot --output /tmp/logged-in.png

This skill enables zero-context browser automation directly from your existing Chrome session.
chrome-devtools --target "$TARGET" wait-for "Dashboard" --timeout 10000 chrome-devtools --target "$TARGET" screenshot --output /tmp/logged-in.png

该技能支持直接从现有Chrome会话实现零上下文的浏览器自动化。