何时使用此技能

用例	此技能	browser-discovery
控制台错误检查	是	否
网络请求分析	是	有限
性能追踪	是	否
认证会话	是	否
屏幕截图	否	是
表单填写	否	是
基本导航	有限	是

设置要求

选项1：连接到现有Chrome（推荐）

启动Chrome并启用远程调试：

# Linux
google-chrome --remote-debugging-port=9222

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

设置环境变量：

export CHROME_DEVTOOLS_URL=http://127.0.0.1:9222

选项2：Chrome自动连接（145+）

对于Chrome 145+，启用chrome://inspect/#remote-debugging处的远程调试。

渐进式披露模式

此技能使用渐进式MCP披露以提高令牌效率：

Chrome DevTools MCP服务器
         |
         v
Python包装器（.claude/ai-dev-kit/dev-tools/mcp_servers/chrome_devtools/）
         |
         v
Claude通过Bash执行Python（按需）
         |
         v
返回结果（工具不在系统提示中）

好处：与在系统提示中加载所有MCP工具相比，减少了98%以上的令牌。

快速示例

获取控制台错误

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import console

errors = console.list_console_messages(types=['error'])
print(errors)
"

列出网络请求

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import network

requests = network.list_network_requests(resource_types=['xhr', 'fetch'])
print(requests)
"

执行JavaScript

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import debug

title = debug.evaluate_script('document.title')
print(f'页面标题：{title}')
"

调试认证会话

# 1. 在启动了--remote-debugging-port=9222的Chrome中手动登录网站
# 2. 然后分析认证状态：

uv run python -c "
import sys; sys.path.insert(0, 'dev-tools')
from mcp_servers.chrome_devtools import navigation, network, debug

# 列出打开的标签页
pages = navigation.list_pages()
print(pages)

# 从localStorage获取认证令牌
tokens = debug.evaluate_script('JSON.stringify(localStorage)')
print(f'localStorage：{tokens}')

# 查看最近的API调用
api_calls = network.get_api_requests()
print(api_calls)
"

可用工具模块

console

list_console_messages(types, page_size, page_idx) - 获取控制台输出
get_console_message(message_id) - 获取特定消息详情
get_errors() - 便捷：仅获取错误消息
get_warnings() - 便捷：仅获取警告

network

list_network_requests(resource_types, page_size, page_idx) - 列出请求
get_network_request(request_id) - 获取完整的请求/响应详情
get_failed_requests() - 便捷：获取4xx/5xx请求
get_api_requests() - 便捷：获取XHR/fetch请求
get_slow_requests(threshold_ms) - 便捷：获取慢请求

performance

start_trace(reload, auto_stop) - 开始记录追踪
stop_trace() - 停止并获取追踪数据
get_insights() - 获取可用的洞察集
analyze_insight(insight_set_id, insight_name) - AI驱动的洞察分析

debug

evaluate_script(expression) - 执行JavaScript

navigation

navigate_page(url, nav_type, ignore_cache, timeout) - 导航页面
list_pages() - 列出所有标签页
select_page(page_idx, bring_to_front) - 通过索引切换标签页
new_page(url, timeout) - 打开新标签页
close_page(page_idx) - 通过索引关闭标签页
wait_for(text, timeout) - 等待页面上的文本

红旗

Chrome未用--remote-debugging-port=9222启动
未设置CHROME_DEVTOOLS_URL环境变量
端口9222被防火墙阻止
尝试用于屏幕截图（请改用browser-discovery）
未安装MCP服务器（npx chrome-devtools-mcp@latest）

另见

reference.md - 完整API文档
cookbook/console-debugging.md - 控制台调试模式
cookbook/network-debugging.md - 网络分析模式
browser-discovery技能 - 用于屏幕截图、基本自动化
Chrome DevTools Protocol