← Back to list

chrome-devtools
by tuantiensiu
⭐ 1🍴 0📅 Jan 12, 2026
SKILL.md
name: chrome-devtools description: Chrome DevTools for debugging, performance analysis, and browser automation. Use when debugging web apps, analyzing performance, inspecting network requests, or automating browser interactions.
Chrome DevTools (MCP)
Control and inspect a live Chrome browser via Chrome DevTools Protocol.
Available Tools
take_snapshot- Get accessibility tree snapshot with element UIDstake_screenshot- Capture screenshot of page or elementnavigate_page- Navigate to URL, back, forward, or reloadnew_page- Open a new browser tablist_pages- List all open pages/tabsclick- Click element by UIDfill- Type text into elementhover- Hover over elementpress_key- Press keyboard key (Enter, Tab, etc.)evaluate_script- Run JavaScript in page contextwait_for- Wait for text to appear
Workflow
- Snapshot the page using
take_snapshotto get element UIDs - Navigate to target URL using
navigate_page - Interact using
click,fill,hoverwith UIDs from snapshot - Screenshot to capture results using
take_screenshot
Quick Start
# Get page structure with element UIDs
skill_mcp(skill_name="chrome-devtools", tool_name="take_snapshot")
# Navigate to URL
skill_mcp(skill_name="chrome-devtools", tool_name="navigate_page", arguments='{"type": "url", "url": "https://example.com"}')
# Click element (use UID from snapshot)
skill_mcp(skill_name="chrome-devtools", tool_name="click", arguments='{"uid": "e123"}')
# Fill input field
skill_mcp(skill_name="chrome-devtools", tool_name="fill", arguments='{"uid": "e456", "value": "hello"}')
# Take screenshot
skill_mcp(skill_name="chrome-devtools", tool_name="take_screenshot")
Tips
- Always
take_snapshotfirst to get element UIDs - Element UIDs change after navigation - take fresh snapshot
- Use
wait_forafter actions that trigger page changes - Use
evaluate_scriptfor custom JS when tools don't cover your need
vs Playwright
| Feature | chrome-devtools | playwright |
|---|---|---|
| Browser support | Chrome only | Chrome, FF, WebKit |
| Performance tracing | ✅ (full MCP has it) | ❌ |
| Network inspection | ✅ (full MCP has it) | ❌ |
| Cross-browser | ❌ | ✅ |
Note: This skill loads 11 essential tools. For full 26+ tools (performance, network, console), modify
mcp.jsonto removeincludeToolsfilter.
Score
Total Score
50/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
Reviews
💬
Reviews coming soon