Back to Details

chrome-devtools-cli

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
The 
chrome-devtools-mcp
CLI lets you interact with the browser from your terminal.
chrome-devtools-mcp
CLI 允许你从终端与浏览器进行交互。

Setup

设置

Note: If this is your very first time using the CLI, see references/installation.md for setup. Installation is a one-time prerequisite and is not part of the regular AI workflow.
注意：如果这是你首次使用该CLI，请查看references/installation.md进行设置。安装是一次性的前置要求，不属于常规AI工作流的一部分。

AI Workflow

AI工作流

  1. Execute: Run tools directly (e.g., 
    chrome-devtools list_pages
    ). The background server starts implicitly; do not run 
    start
    /
    status
    /
    stop
    before each use.
  2. Inspect: Use 
    take_snapshot
    to get an element 
    <uid>
    .
  3. Act: Use 
    click
    , 
    fill
    , etc. State persists across commands.
Snapshot example:
uid=1_0 RootWebArea "Example Domain" url="https://example.com/"
  uid=1_1 heading "Example Domain" level="1"
  1. 执行：直接运行工具（例如：
    chrome-devtools list_pages
    ）。后台服务器会隐式启动；不要在每次使用前运行
    start
    /
    status
    /
    stop
    命令。
  2. 检查：使用
    take_snapshot
    获取元素的
    <uid>
    。
  3. 操作：使用
    click
    、
    fill
    等命令。状态会在多个命令间保持。
快照示例：
uid=1_0 RootWebArea "Example Domain" url="https://example.com/"
  uid=1_1 heading "Example Domain" level="1"

Command Usage

命令用法

sh
chrome-devtools <tool> [arguments] [flags]
Use 
--help
on any command. Output defaults to Markdown, use 
--output-format=json
for JSON.
sh
chrome-devtools <tool> [arguments] [flags]
在任意命令后使用
--help
查看帮助。输出默认格式为Markdown，使用
--output-format=json
可获取JSON格式输出。

Input Automation (<uid> from snapshot)

输入自动化（使用快照中的<uid>）

bash
chrome-devtools take_snapshot --help # Help message for commands, works for any command.
chrome-devtools take_snapshot # Take a text snapshot of the page to get UIDs for elements
chrome-devtools click "id" # Clicks on the provided element
chrome-devtools click "id" --dblClick true --includeSnapshot true # Double clicks and returns a snapshot
chrome-devtools drag "src" "dst" # Drag an element onto another element
chrome-devtools drag "src" "dst" --includeSnapshot true # Drag an element and return a snapshot
chrome-devtools fill "id" "text" # Type text into an input or select an option
chrome-devtools fill "id" "text" --includeSnapshot true # Fill an element and return a snapshot
chrome-devtools handle_dialog accept # Handle a browser dialog
chrome-devtools handle_dialog dismiss --promptText "hi" # Dismiss a dialog with prompt text
chrome-devtools hover "id" # Hover over the provided element
chrome-devtools hover "id" --includeSnapshot true # Hover over an element and return a snapshot
chrome-devtools press_key "Enter" # Press a key or key combination
chrome-devtools press_key "Control+A" --includeSnapshot true # Press a key and return a snapshot
chrome-devtools type_text "hello" # Type text using keyboard into a focused input
chrome-devtools type_text "hello" --submitKey "Enter" # Type text and press a submit key
chrome-devtools upload_file "id" "file.txt" # Upload a file through a provided element
chrome-devtools upload_file "id" "file.txt" --includeSnapshot true # Upload a file and return a snapshot
bash
chrome-devtools take_snapshot --help # 查看命令帮助信息，适用于所有命令。
chrome-devtools take_snapshot # 拍摄页面文本快照以获取元素的UID
chrome-devtools click "id" # 点击指定元素
chrome-devtools click "id" --dblClick true --includeSnapshot true # 双击元素并返回快照
chrome-devtools drag "src" "dst" # 将元素拖动到另一个元素上
chrome-devtools drag "src" "dst" --includeSnapshot true # 拖动元素并返回快照
chrome-devtools fill "id" "text" # 在输入框中输入文本或选择选项
chrome-devtools fill "id" "text" --includeSnapshot true # 填充元素并返回快照
chrome-devtools handle_dialog accept # 处理浏览器对话框
chrome-devtools handle_dialog dismiss --promptText "hi" # 关闭对话框并填写提示文本
chrome-devtools hover "id" # 悬停在指定元素上
chrome-devtools hover "id" --includeSnapshot true # 悬停在元素上并返回快照
chrome-devtools press_key "Enter" # 按下某个按键或组合键
chrome-devtools press_key "Control+A" --includeSnapshot true # 按下按键并返回快照
chrome-devtools type_text "hello" # 通过键盘在已聚焦的输入框中输入文本
chrome-devtools type_text "hello" --submitKey "Enter" # 输入文本并按下提交键
chrome-devtools upload_file "id" "file.txt" # 通过指定元素上传文件
chrome-devtools upload_file "id" "file.txt" --includeSnapshot true # 上传文件并返回快照

Navigation

导航

bash
chrome-devtools close_page 1 # Closes the page by its index
chrome-devtools list_pages # Get a list of pages open in the browser
chrome-devtools navigate_page --url "https://example.com" # Navigates the currently selected page to a URL
chrome-devtools navigate_page --type "reload" --ignoreCache true # Reload page ignoring cache
chrome-devtools navigate_page --url "https://example.com" --timeout 5000 # Navigate with a timeout
chrome-devtools navigate_page --handleBeforeUnload "accept" # Handle before unload dialog
chrome-devtools navigate_page --type "back" --initScript "foo()" # Navigate back and run an init script
chrome-devtools new_page "https://example.com" # Creates a new page
chrome-devtools new_page "https://example.com" --background true --timeout 5000 # Create new page in background
chrome-devtools new_page "https://example.com" --isolatedContext "ctx" # Create new page with isolated context
chrome-devtools select_page 1 # Select a page as a context for future tool calls
chrome-devtools select_page 1 --bringToFront true # Select a page and bring it to front
bash
chrome-devtools close_page 1 # 通过索引关闭页面
chrome-devtools list_pages # 获取浏览器中打开的页面列表
chrome-devtools navigate_page --url "https://example.com" # 将当前选中的页面导航到指定URL
chrome-devtools navigate_page --type "reload" --ignoreCache true # 忽略缓存重新加载页面
chrome-devtools navigate_page --url "https://example.com" --timeout 5000 # 带超时时间的页面导航
chrome-devtools navigate_page --handleBeforeUnload "accept" # 处理页面卸载前的对话框
chrome-devtools navigate_page --type "back" --initScript "foo()" # 后退并运行初始化脚本
chrome-devtools new_page "https://example.com" # 创建新页面
chrome-devtools new_page "https://example.com" --background true --timeout 5000 # 在后台创建新页面并设置超时时间
chrome-devtools new_page "https://example.com" --isolatedContext "ctx" # 创建带有隔离上下文的新页面
chrome-devtools select_page 1 # 选择页面作为后续工具调用的上下文
chrome-devtools select_page 1 --bringToFront true # 选择页面并将其置于前台

Emulation

模拟

bash
chrome-devtools emulate --networkConditions "Offline" # Emulate network conditions
chrome-devtools emulate --cpuThrottlingRate 4 --geolocation "0,0" # Emulate CPU throttling and geolocation
chrome-devtools emulate --colorScheme "dark" --viewport "1920x1080" # Emulate color scheme and viewport
chrome-devtools emulate --userAgent "Mozilla/5.0..." # Emulate user agent
chrome-devtools resize_page 1920 1080 # Resizes the selected page's window
bash
chrome-devtools emulate --networkConditions "Offline" # 模拟网络条件
chrome-devtools emulate --cpuThrottlingRate 4 --geolocation "0,0" # 模拟CPU节流和地理位置
chrome-devtools emulate --colorScheme "dark" --viewport "1920x1080" # 模拟配色方案和视口
chrome-devtools emulate --userAgent "Mozilla/5.0..." # 模拟用户代理
chrome-devtools resize_page 1920 1080 # 调整选中页面的窗口大小

Performance

性能

bash
chrome-devtools performance_analyze_insight "1" "LCPBreakdown" # Get more details on a specific Performance Insight
chrome-devtools performance_start_trace true false # Starts a performance trace recording
chrome-devtools performance_start_trace true true --filePath t.gz # Start trace and save to a file
chrome-devtools performance_stop_trace # Stops the active performance trace
chrome-devtools performance_stop_trace --filePath "t.json" # Stop trace and save to a file
chrome-devtools take_memory_snapshot "./snap.heapsnapshot" # Capture a memory heapsnapshot
bash
chrome-devtools performance_analyze_insight "1" "LCPBreakdown" # 获取特定性能洞察的详细信息
chrome-devtools performance_start_trace true false # 开始性能跟踪记录
chrome-devtools performance_start_trace true true --filePath t.gz # 开始性能跟踪并保存到文件
chrome-devtools performance_stop_trace # 停止当前的性能跟踪
chrome-devtools performance_stop_trace --filePath "t.json" # 停止性能跟踪并保存到文件
chrome-devtools take_memory_snapshot "./snap.heapsnapshot" # 捕获内存堆快照

Network

网络

bash
chrome-devtools get_network_request # Get the currently selected network request
chrome-devtools get_network_request --reqid 1 --requestFilePath req.md # Get request by id and save to file
chrome-devtools get_network_request --responseFilePath res.md # Save response body to file
chrome-devtools list_network_requests # List all network requests
chrome-devtools list_network_requests --pageSize 50 --pageIdx 0 # List network requests with pagination
chrome-devtools list_network_requests --resourceTypes Fetch # Filter requests by resource type
chrome-devtools list_network_requests --includePreservedRequests true # Include preserved requests
bash
chrome-devtools get_network_request # 获取当前选中的网络请求
chrome-devtools get_network_request --reqid 1 --requestFilePath req.md # 通过ID获取请求并保存到文件
chrome-devtools get_network_request --responseFilePath res.md # 将响应体保存到文件
chrome-devtools list_network_requests # 列出所有网络请求
chrome-devtools list_network_requests --pageSize 50 --pageIdx 0 # 分页列出网络请求
chrome-devtools list_network_requests --resourceTypes Fetch # 按资源类型过滤请求
chrome-devtools list_network_requests --includePreservedRequests true # 包含已保留的请求

Debugging & Inspection

调试与检查

bash
chrome-devtools evaluate_script "() => document.title" # Evaluate a JavaScript function on the page
evaluate_script "(a) => a.innerText" --args 1_4 # Evaluate JS with UID arguments
chrome-devtools get_console_message 1 # Gets a console message by its ID
chrome-devtools lighthouse_audit --mode "navigation" # Run Lighthouse audit for navigation
chrome-devtools lighthouse_audit --mode "snapshot" --device "mobile" # Run Lighthouse audit for a snapshot on mobile
chrome-devtools lighthouse_audit --outputDirPath ./out # Run Lighthouse audit and save reports
chrome-devtools list_console_messages # List all console messages
chrome-devtools list_console_messages --pageSize 20 --pageIdx 1 # List console messages with pagination
chrome-devtools list_console_messages --types error --types info # Filter console messages by type
chrome-devtools list_console_messages --includePreservedMessages true # Include preserved messages
chrome-devtools take_screenshot # Take a screenshot of the page viewport
chrome-devtools take_screenshot --fullPage true --format "jpeg" --quality 80 # Take a full page screenshot as JPEG with quality
chrome-devtools take_screenshot --uid "id" --filePath "s.png" # Take a screenshot of an element
chrome-devtools take_snapshot # Take a text snapshot of the page from the a11y tree
chrome-devtools take_snapshot --verbose true --filePath "s.txt" # Take a verbose snapshot and save to file
bash
chrome-devtools evaluate_script "() => document.title" # 在页面上执行JavaScript函数
evaluate_script "(a) => a.innerText" --args 1_4 # 传入UID参数执行JS
chrome-devtools get_console_message 1 # 通过ID获取控制台消息
chrome-devtools lighthouse_audit --mode "navigation" # 运行Lighthouse导航审计
chrome-devtools lighthouse_audit --mode "snapshot" --device "mobile" # 在移动设备模式下运行Lighthouse快照审计
chrome-devtools lighthouse_audit --outputDirPath ./out # 运行Lighthouse审计并保存报告
chrome-devtools list_console_messages # 列出所有控制台消息
chrome-devtools list_console_messages --pageSize 20 --pageIdx 1 # 分页列出控制台消息
chrome-devtools list_console_messages --types error --types info # 按类型过滤控制台消息
chrome-devtools list_console_messages --includePreservedMessages true # 包含已保留的消息
chrome-devtools take_screenshot # 拍摄页面视口的截图
chrome-devtools take_screenshot --fullPage true --format "jpeg" --quality 80 # 拍摄全页面截图，格式为JPEG，质量80
chrome-devtools take_screenshot --uid "id" --filePath "s.png" # 拍摄指定元素的截图
chrome-devtools take_snapshot # 从无障碍树中拍摄页面的文本快照
chrome-devtools take_snapshot --verbose true --filePath "s.txt" # 拍摄详细快照并保存到文件

Service Management

服务管理

bash
chrome-devtools start   # Start or restart chrome-devtools-mcp
chrome-devtools status  # Checks if chrome-devtools-mcp is running
chrome-devtools stop    # Stop chrome-devtools-mcp if any
bash
chrome-devtools start   # 启动或重启chrome-devtools-mcp
chrome-devtools status  # 检查chrome-devtools-mcp是否在运行
chrome-devtools stop    # 停止chrome-devtools-mcp（如果正在运行）