重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/zenobi-us/dotfiles --skill chrome-debugChrome DevTools Protocol (CDP) 通过 mcporter 实现远程浏览器自动化和调试。
核心功能:
在使用 Chrome DevTools 之前,请确保:
mise x node@20 -- mcporter call chrome-devtools.list_pages
如果失败:
google-chrome --remote-debugging-port=9222| 工具 | 用途 |
|---|---|
list_pages |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 列出所有打开的页面/标签页 |
select_page | 选择要操作的特定页面/标签页 |
new_page | 创建新的浏览器页面/标签页 |
close_page | 关闭浏览器页面/标签页 |
navigate_page | 导航到 URL、后退、前进或重新加载 |
take_snapshot | 获取 DOM 快照以供检查(返回 UID) |
take_screenshot | 捕获当前页面的屏幕截图 |
click | 点击页面上的元素 |
fill | 用文本填充输入字段 |
hover | 将鼠标悬停在元素上 |
press_key | 按下键盘按键(Enter、Tab、Escape 等) |
evaluate_script | 在页面上下文中执行 JavaScript 代码 |
wait_for | 等待元素、导航或条件 |
list_console_messages | 获取所有控制台消息(日志、错误、警告) |
list_network_requests | 获取页面发出的所有网络请求 |
emulate | 模拟设备设置(网络、CPU 节流) |
resize_page | 调整浏览器视口大小 |
performance_start_trace | 开始性能追踪 |
performance_stop_trace | 停止性能追踪并获取结果 |
[!TIP] 获取完整工具列表:
mcporter list chrome-devtools --json | jq -r '.tools[] | [.name, .description] | @tsv' | column -t -s $'\t'
list_pages 查看所有打开的页面select_page 选择要操作的页面take_snapshot 以获取带有 UID 的可访问性树--argsfilePath、fullPage、pageIdx)--file-path 或 --full-pageevaluate_script 需要一个函数声明,而不是纯代码args 数组传递元素参数以 bash 友好格式呈现的基本命令:
# 列出并选择页面
mise x node@20 -- mcporter call chrome-devtools.list_pages
mise x node@20 -- mcporter call chrome-devtools.select_page --args '{"pageIdx":0}'
# 获取快照以获取 UID
mise x node@20 -- mcporter call chrome-devtools.take_snapshot
# 截取屏幕截图
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./screen.png"}'
# 截取整页屏幕截图
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./full.png","fullPage":true}'
# 导航到 URL
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"url","url":"http://localhost:3000"}'
# 后退/前进/重新加载导航
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"back"}'
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"reload"}'
# 点击元素(需要快照中的 UID)
mise x node@20 -- mcporter call chrome-devtools.click --args '{"uid":"12"}'
# 填充输入字段
mise x node@20 -- mcporter call chrome-devtools.fill --args '{"uid":"5","value":"test@example.com"}'
# 悬停元素
mise x node@20 -- mcporter call chrome-devtools.hover --args '{"uid":"8"}'
# 按键
mise x node@20 -- mcporter call chrome-devtools.press_key --args '{"key":"Enter"}'
# 运行 JavaScript
mise x node@20 -- mcporter call chrome-devtools.evaluate_script --args '{"function":"() => { return document.title }"}'
# 运行带元素参数的 JS
mise x node@20 -- mcporter call chrome-devtools.evaluate_script --args '{"function":"(el) => { return el.innerText }","args":[{"uid":"12"}]}'
# 列出控制台消息
mise x node@20 -- mcporter call chrome-devtools.list_console_messages
# 仅列出错误
mise x node@20 -- mcporter call chrome-devtools.list_console_messages --args '{"types":["error"]}'
# 列出网络请求
mise x node@20 -- mcporter call chrome-devtools.list_network_requests
# 按类型筛选网络请求
mise x node@20 -- mcporter call chrome-devtools.list_network_requests --args '{"types":["fetch","xhr"]}'
# 等待文本出现
mise x node@20 -- mcporter call chrome-devtools.wait_for --args '{"text":"Success"}'
# 模拟网络条件
mise x node@20 -- mcporter call chrome-devtools.emulate --args '{"networkConditions":"Slow 3G"}'
# 1. 选择页面并获取快照
mise x node@20 -- mcporter call chrome-devtools.list_pages
mise x node@20 -- mcporter call chrome-devtools.select_page --args '{"pageIdx":0}'
SNAPSHOT=$(mise x node@20 -- mcporter call chrome-devtools.take_snapshot)
echo "$SNAPSHOT"
# 2. 在快照输出中查找元素 UID
# 示例:uid=12 input type="email"
# 3. 使用其 UID 与元素交互
mise x node@20 -- mcporter call chrome-devtools.fill --args '{"uid":"12","value":"user@example.com"}'
mise x node@20 -- mcporter call chrome-devtools.click --args '{"uid":"15"}'
# 截取视口屏幕截图
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./screen.png"}'
# 截取整页屏幕截图
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./full.png","fullPage":true}'
# 截取特定元素屏幕截图
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"uid":"20","filePath":"./button.png"}'
# 检查控制台是否有错误
mise x node@20 -- mcporter call chrome-devtools.list_console_messages --args '{"types":["error","warn"]}'
# 检查网络请求
mise x node@20 -- mcporter call chrome-devtools.list_network_requests --args '{"types":["fetch","xhr"]}'
# 执行 JavaScript 以获取性能指标
mise x node@20 -- mcporter call chrome-devtools.evaluate_script \
--args '{"function":"() => { const perf = performance.getEntriesByType(\"navigation\")[0]; return { loadTime: perf.loadEventEnd - perf.fetchStart, domInteractive: perf.domInteractive - perf.fetchStart }; }"}'
# ❌ 错误 - CSS 选择器不起作用
mise x node@20 -- mcporter call chrome-devtools.click --selector "#login-button"
# ✅ 正确 - 使用快照中的 UID
mise x node@20 -- mcporter call chrome-devtools.take_snapshot # 首先获取 UID
mise x node@20 -- mcporter call chrome-devtools.click --args '{"uid":"12"}'
# 导航后,UID 无效
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"url","url":"..."}'
# 获取新的快照以获取新的 UID
mise x node@20 -- mcporter call chrome-devtools.take_snapshot
# ❌ 错误 - 单独的标志不起作用
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --file-path "./screen.png"
# ✅ 正确 - 使用带有 JSON 的 --args
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./screen.png"}'
| 错误 | 解决方案 |
|---|---|
| "Element not found" / "Invalid UID" | 获取新的快照:take_snapshot |
| "No page selected" | 选择页面:select_page --args '{"pageIdx":0}' |
| "Connection refused" | 启动 Chrome:google-chrome --remote-debugging-port=9222 |
| Screenshot not created | 确保目录存在并使用 --args 格式 |
| UIDs not working | UID 在导航后失效 - 获取新的快照 |
根据需要懒加载这些参考资料:
[!IMPORTANT] 仅在需要时加载参考资料 - 不要预先阅读所有文件。阅读与您当前任务匹配的特定参考资料。
集成 Chrome DevTools Protocol 可实现:
没有此集成,调试 Web 应用程序需要在浏览器和 Agent 之间不断切换上下文。
每周安装次数
62
代码仓库
GitHub 星标数
48
首次出现
2026年1月24日
安全审计
安装于
opencode60
codex58
gemini-cli57
cursor56
kimi-cli54
amp54
Chrome DevTools Protocol (CDP) enables remote browser automation and debugging through mcporter.
Key capabilities:
Before using Chrome DevTools, ensure:
mise x node@20 -- mcporter call chrome-devtools.list_pages
If this fails:
google-chrome --remote-debugging-port=9222| Tool | Purpose |
|---|---|
list_pages | List all open pages/tabs |
select_page | Select a specific page/tab to work with |
new_page | Create a new browser page/tab |
close_page | Close a browser page/tab |
navigate_page | Navigate to a URL, back, forward, or reload |
take_snapshot | Take a DOM snapshot for inspection (returns UIDs) |
take_screenshot |
[!TIP] Get full tool list:
mcporter list chrome-devtools --json | jq -r '.tools[] | [.name, .description] | @tsv' | column -t -s $'\t'
list_pages to see all open pagesselect_page to choose which page to work withtake_snapshot to get accessibility tree with UIDs--args with JSON objectfilePath, fullPage, pageIdx)--file-path or --full-pageevaluate_script requires a function declaration , not plain codeargs array with UIDsEssential commands in bash-friendly format:
# List and select page
mise x node@20 -- mcporter call chrome-devtools.list_pages
mise x node@20 -- mcporter call chrome-devtools.select_page --args '{"pageIdx":0}'
# Take snapshot to get UIDs
mise x node@20 -- mcporter call chrome-devtools.take_snapshot
# Take screenshot
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./screen.png"}'
# Take full-page screenshot
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./full.png","fullPage":true}'
# Navigate to URL
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"url","url":"http://localhost:3000"}'
# Navigate back/forward/reload
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"back"}'
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"reload"}'
# Click element (requires UID from snapshot)
mise x node@20 -- mcporter call chrome-devtools.click --args '{"uid":"12"}'
# Fill input field
mise x node@20 -- mcporter call chrome-devtools.fill --args '{"uid":"5","value":"test@example.com"}'
# Hover element
mise x node@20 -- mcporter call chrome-devtools.hover --args '{"uid":"8"}'
# Press key
mise x node@20 -- mcporter call chrome-devtools.press_key --args '{"key":"Enter"}'
# Run JavaScript
mise x node@20 -- mcporter call chrome-devtools.evaluate_script --args '{"function":"() => { return document.title }"}'
# Run JS with element argument
mise x node@20 -- mcporter call chrome-devtools.evaluate_script --args '{"function":"(el) => { return el.innerText }","args":[{"uid":"12"}]}'
# List console messages
mise x node@20 -- mcporter call chrome-devtools.list_console_messages
# List only errors
mise x node@20 -- mcporter call chrome-devtools.list_console_messages --args '{"types":["error"]}'
# List network requests
mise x node@20 -- mcporter call chrome-devtools.list_network_requests
# Filter network by type
mise x node@20 -- mcporter call chrome-devtools.list_network_requests --args '{"types":["fetch","xhr"]}'
# Wait for text to appear
mise x node@20 -- mcporter call chrome-devtools.wait_for --args '{"text":"Success"}'
# Emulate network conditions
mise x node@20 -- mcporter call chrome-devtools.emulate --args '{"networkConditions":"Slow 3G"}'
# 1. Select page and take snapshot
mise x node@20 -- mcporter call chrome-devtools.list_pages
mise x node@20 -- mcporter call chrome-devtools.select_page --args '{"pageIdx":0}'
SNAPSHOT=$(mise x node@20 -- mcporter call chrome-devtools.take_snapshot)
echo "$SNAPSHOT"
# 2. Find element UID in snapshot output
# Example: uid=12 input type="email"
# 3. Interact with element using its UID
mise x node@20 -- mcporter call chrome-devtools.fill --args '{"uid":"12","value":"user@example.com"}'
mise x node@20 -- mcporter call chrome-devtools.click --args '{"uid":"15"}'
# Take viewport screenshot
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./screen.png"}'
# Take full-page screenshot
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./full.png","fullPage":true}'
# Screenshot specific element
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"uid":"20","filePath":"./button.png"}'
# Check console for errors
mise x node@20 -- mcporter call chrome-devtools.list_console_messages --args '{"types":["error","warn"]}'
# Check network requests
mise x node@20 -- mcporter call chrome-devtools.list_network_requests --args '{"types":["fetch","xhr"]}'
# Execute JavaScript to get performance metrics
mise x node@20 -- mcporter call chrome-devtools.evaluate_script \
--args '{"function":"() => { const perf = performance.getEntriesByType(\"navigation\")[0]; return { loadTime: perf.loadEventEnd - perf.fetchStart, domInteractive: perf.domInteractive - perf.fetchStart }; }"}'
# ❌ WRONG - CSS selectors don't work
mise x node@20 -- mcporter call chrome-devtools.click --selector "#login-button"
# ✅ CORRECT - Use UIDs from snapshot
mise x node@20 -- mcporter call chrome-devtools.take_snapshot # Get UIDs first
mise x node@20 -- mcporter call chrome-devtools.click --args '{"uid":"12"}'
# After navigation, UIDs are invalid
mise x node@20 -- mcporter call chrome-devtools.navigate_page --args '{"type":"url","url":"..."}'
# Take fresh snapshot to get new UIDs
mise x node@20 -- mcporter call chrome-devtools.take_snapshot
# ❌ WRONG - Individual flags don't work
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --file-path "./screen.png"
# ✅ CORRECT - Use --args with JSON
mise x node@20 -- mcporter call chrome-devtools.take_screenshot --args '{"filePath":"./screen.png"}'
| Error | Solution |
|---|---|
| "Element not found" / "Invalid UID" | Take fresh snapshot: take_snapshot |
| "No page selected" | Select page: select_page --args '{"pageIdx":0}' |
| "Connection refused" | Start Chrome: google-chrome --remote-debugging-port=9222 |
| Screenshot not created | Ensure directory exists and use --args format |
| UIDs not working | UIDs expired after navigation - take new snapshot |
Lazy-load these references based on your needs:
| Reference | When to Use |
|---|---|
| Element Interaction | When working with UIDs, clicking, hovering, or measuring elements |
| Form Filling | When filling forms, submitting data, or handling keyboard input |
| Screenshots | When capturing screenshots, visual testing, or documenting state |
| Performance | When measuring page performance, network timing, or emulating conditions |
| Debugging | When investigating console errors, network failures, or script evaluation |
| Navigation | When navigating pages, managing tabs, or handling viewports |
[!IMPORTANT] Load references only when needed - Don't read all files upfront. Read the specific reference that matches your current task.
Integrating Chrome DevTools Protocol enables:
Without this integration, debugging web applications requires constant context-switching between browser and Agent.
Weekly Installs
62
Repository
GitHub Stars
48
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykWarn
Installed on
opencode60
codex58
gemini-cli57
cursor56
kimi-cli54
amp54
Skills CLI 使用指南:AI Agent 技能包管理器安装与管理教程
52,700 周安装
| Capture a screenshot of the current page |
click | Click an element on the page |
fill | Fill input fields with text |
hover | Hover over an element |
press_key | Press keyboard keys (Enter, Tab, Escape, etc.) |
evaluate_script | Execute JavaScript code in the page context |
wait_for | Wait for elements, navigation, or conditions |
list_console_messages | Get all console messages (logs, errors, warnings) |
list_network_requests | Get all network requests made by the page |
emulate | Emulate device settings (network, CPU throttling) |
resize_page | Resize the browser viewport |
performance_start_trace | Start performance tracing |
performance_stop_trace | Stop performance tracing and get results |
| Troubleshooting | When encountering errors or unexpected behavior |