菜单
This skill provides guidance for using Chrome DevTools MCP for browser debugging and automation. Use when debugging web pages, analyzing performance, inspecting network requests, viewing console messages, or interacting with Chrome DevTools features programmatically.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Bump version in package.json and auto-generate CHANGELOG.md using standard-version for vscode-sidebar-terminal. Triggered by /release or /version commands.
Run code quality checks (ruff, mypy, pytest) and optionally simplify code. This skill should be used when the user wants to check code quality, run linters, run tests, or simplify recently modified code. Triggered by /lint, /check, or /code-quality commands.
Perform structured code reviews focusing on correctness, readability, security, and maintainability. Use this skill when reviewing pull requests, evaluating code changes, or establishing review standards for a team.
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise. This skill should be used when code-quality checks pass but the code would benefit from structural cleanup — deduplication, branching simplification, naming improvements, or dead-code removal. Invoked as a subagent from /code-quality or directly via the Task tool.
Guide for creating distinctive, production-grade frontend interfaces. Covers visual design systems, typography, color, motion, spatial composition, and web interface standards. Use when designing UI, establishing design systems, or reviewing visual quality of frontend code.
Runs synapse-docs, /simplify, sync-plugin-skills, and github-pages-sync in parallel for synapse-a2a development workflows. Use when you need doc updates, code simplification, plugin skill sync, and site-docs sync at the same time.
| name | mcp-chrome-devtools |
| description | This skill provides guidance for using Chrome DevTools MCP for browser debugging and automation. Use when debugging web pages, analyzing performance, inspecting network requests, viewing console messages, or interacting with Chrome DevTools features programmatically. |
This skill enables browser debugging and automation using Chrome DevTools through MCP. It provides access to Chrome DevTools features including page interaction, network analysis, console inspection, and performance tracing.
list_pagesselect_pagetake_snapshotlist_pages - Get all open pages
mcp__chrome-devtools__list_pages({})
select_page - Select a page for operations
mcp__chrome-devtools__select_page({ pageIdx: 0 })
new_page - Create a new page
mcp__chrome-devtools__new_page({ url: "https://example.com" })
close_page - Close a page
mcp__chrome-devtools__close_page({ pageIdx: 1 })
navigate_page - Navigate the selected page
mcp__chrome-devtools__navigate_page({ type: "url", url: "https://example.com" })
mcp__chrome-devtools__navigate_page({ type: "back" })
mcp__chrome-devtools__navigate_page({ type: "reload", ignoreCache: true })
take_snapshot - Get accessibility tree (preferred for interaction)
mcp__chrome-devtools__take_snapshot({})
take_screenshot - Capture visual screenshot
mcp__chrome-devtools__take_screenshot({
format: "png",
fullPage: true,
filePath: "./screenshot.png"
})
click - Click an element
mcp__chrome-devtools__click({ uid: "element-uid" })
mcp__chrome-devtools__click({ uid: "element-uid", dblClick: true })
fill - Fill input or select option
mcp__chrome-devtools__fill({ uid: "input-uid", value: "text" })
fill_form - Fill multiple form elements
mcp__chrome-devtools__fill_form({
elements: [
{ uid: "username-uid", value: "user" },
{ uid: "password-uid", value: "pass" }
]
})
hover - Hover over an element
mcp__chrome-devtools__hover({ uid: "element-uid" })
drag - Drag and drop
mcp__chrome-devtools__drag({ from_uid: "source", to_uid: "target" })
list_console_messages - Get console messages
mcp__chrome-devtools__list_console_messages({})
mcp__chrome-devtools__list_console_messages({ types: ["error", "warn"] })
get_console_message - Get specific message details
mcp__chrome-devtools__get_console_message({ msgid: 1 })
list_network_requests - Get network requests
mcp__chrome-devtools__list_network_requests({})
mcp__chrome-devtools__list_network_requests({ resourceTypes: ["fetch", "xhr"] })
get_network_request - Get request details
mcp__chrome-devtools__get_network_request({ reqid: 1 })
performance_start_trace - Start performance trace
mcp__chrome-devtools__performance_start_trace({
reload: true,
autoStop: true
})
performance_stop_trace - Stop performance trace
mcp__chrome-devtools__performance_stop_trace({})
performance_analyze_insight - Analyze performance insight
mcp__chrome-devtools__performance_analyze_insight({
insightSetId: "insight-set-id",
insightName: "LCPBreakdown"
})
evaluate_script - Execute JavaScript
mcp__chrome-devtools__evaluate_script({
function: "() => document.title"
})
press_key - Press keyboard key
mcp__chrome-devtools__press_key({ key: "Enter" })
mcp__chrome-devtools__press_key({ key: "Control+A" })
emulate - Emulate conditions
mcp__chrome-devtools__emulate({
networkConditions: "Slow 3G",
cpuThrottlingRate: 4
})
handle_dialog - Handle browser dialog
mcp__chrome-devtools__handle_dialog({ action: "accept" })
wait_for - Wait for text
mcp__chrome-devtools__wait_for({ text: "Loading complete" })
take_snapshot before interacting to get uidsselect_page before page-specific operationslist_console_messages for debugginglist_network_requests to debug API issuesFor complete tool parameters, see references/tools.md.