⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Chrome远程调试与浏览器自动化工具：通过CDP协议实现网页操控和测试

chrome-debug by zenobi-us/dotfiles

64 周安装量

48 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/zenobi-us/dotfiles --skill chrome-debug

自动化调试测试

🇨🇳中文介绍

通过远程调试协议进行 Chrome 调试和浏览器操控

概述

Chrome DevTools Protocol (CDP) 通过 mcporter 实现远程浏览器自动化和调试。

核心功能：

在 Agent 对话的同时进行实时浏览器调试
自动表单填写和交互测试
通过截图提供视觉反馈
控制台日志和网络请求检查
在页面上下文中执行 JavaScript

先决条件 [关键]

在使用 Chrome DevTools 之前，请确保：

Chrome/Chromium 正在运行且已启用远程调试
浏览器正在监听端口 9222（默认）
使用以下命令测试连接：

mise x node@20 -- mcporter call chrome-devtools.list_pages

如果失败：

启动 Chrome：google-chrome --remote-debugging-port=9222
检查没有其他进程占用端口 9222
请他人协助进行浏览器设置

可用工具

工具	用途
`list_pages`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

FlyClaw：零登录航班聚合查询工具，Python实现多源航班信息与价格搜索

4,000,000 周安装

Azure RBAC 权限管理工具：查找最小角色、创建自定义角色与自动化分配

162,100 周安装

GitHub Actions 官方文档查询助手 - 精准解答 CI/CD 工作流问题

53,800 周安装

通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南

53,400 周安装

所有 mcporter 命令都需要带有 JSON 对象的 --args
属性名称为驼峰式命名（例如 filePath、fullPage、pageIdx）
切勿使用单独的标志，如 --file-path 或 --full-page

# 列出并选择页面
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"}'

错误	解决方案
"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 在导航后失效 - 获取新的快照

参考资料	何时使用
元素交互	当处理 UID、点击、悬停或测量元素时
表单填充	当填充表单、提交数据或处理键盘输入时
屏幕截图	当捕获屏幕截图、进行视觉测试或记录状态时
性能	当测量页面性能、网络计时或模拟条件时
调试	当调查控制台错误、网络故障或脚本评估时
导航	当导航页面、管理标签页或处理视口时
故障排除	当遇到错误或意外行为时

🇺🇸English

Chrome Debugging and Browser Manipulation via Remote Debugging Protocol

Overview

Chrome DevTools Protocol (CDP) enables remote browser automation and debugging through mcporter.

Key capabilities:

Live browser debugging alongside Agent conversations
Automated form filling and interaction testing
Visual feedback via screenshots
Console log and network request inspection
JavaScript execution in page context

Prerequisites [CRITICAL]

Before using Chrome DevTools, ensure:

Chrome/Chromium is running with remote debugging enabled
The browser is listening on port 9222 (default)
Test connection with:

mise x node@20 -- mcporter call chrome-devtools.list_pages

If this fails:

Start Chrome: google-chrome --remote-debugging-port=9222
Check no other process is using port 9222
Get a human to help with browser setup

Available Tools

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'

Core Concepts

1. Page Selection Model

Chrome DevTools works with multiple pages/tabs
Use list_pages to see all open pages
Use select_page to choose which page to work with
All subsequent commands operate on the selected page

2. UID-Based Element Model [CRITICAL]

You CANNOT interact with elements using CSS selectors directly
Must first call take_snapshot to get accessibility tree with UIDs
UIDs are temporary identifiers for elements (e.g., "5", "12", "42")
UIDs are invalidated on navigation - take new snapshot after nav

3. JSON Arguments Required

All mcporter commands require --args with JSON object
Property names are camelCase (e.g., filePath, fullPage, pageIdx)
Never use individual flags like --file-path or --full-page

4. Function-Based Script Evaluation

evaluate_script requires a function declaration , not plain code
Return values must be JSON-serializable
Can pass element arguments via args array with UIDs

Quick Reference

Essential 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"}'

Common Workflows

Basic Element Interaction

# 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"}'

Screenshot Workflow

# 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"}'

Debug JavaScript Errors

# 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"]}'

Run Performance Tests

# 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 }; }"}'

Important Reminders

UID Workflow is Mandatory

# ❌ 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"}'

UIDs Expire on Navigation

# 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

Always Use --args with JSON

# ❌ 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"}'

Quick Troubleshooting

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

Additional Resources

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.

Real-World Impact

Integrating Chrome DevTools Protocol enables:

Live browser debugging alongside Agent conversations
Automated form filling and interaction testing
Visual feedback on application behavior
Immediate error diagnostics from console logs
Screenshot-based validation workflows

Without this integration, debugging web applications requires constant context-switching between browser and Agent.

Weekly Installs

Repository

zenobi-us/dotfiles

GitHub Stars

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubWarn SocketPass SnykWarn

Installed on

opencode60

codex58

gemini-cli57

cursor56

kimi-cli54

amp54

Chrome远程调试与浏览器自动化工具：通过CDP协议实现网页操控和测试

🇨🇳中文介绍

通过远程调试协议进行 Chrome 调试和浏览器操控

概述

先决条件 [关键]

可用工具

相关 Skills

核心概念

1. 页面选择模型

2. 基于 UID 的元素模型 [关键]

3. 需要 JSON 参数

4. 基于函数的脚本评估

快速参考

常见工作流程

基本元素交互

屏幕截图工作流程

调试 JavaScript 错误

运行性能测试

重要提醒

UID 工作流程是强制性的

UID 在导航后失效

始终使用带有 JSON 的 --args

快速故障排除

附加资源

实际影响