AgentSkillsCN

chrome-devtools-debugging

使用 Chrome DevTools MCP 调试并分析 Web 应用程序。可用于检查控制台日志、监控网络请求、分析性能，以及调试已认证的会话。若仅需基础的浏览器自动化操作（如截图、表单填充），建议优先使用浏览器发现技能。

SKILL.md
--- frontmatter
name: chrome-devtools-debugging
description: Debug and analyze web applications using Chrome DevTools MCP. Use for console log inspection, network request monitoring, performance analysis, and debugging authenticated sessions. For basic browser automation (screenshots, form filling), use browser-discovery skill instead.

Chrome DevTools Debugging

Debug web applications by connecting to Chrome's DevTools Protocol. This skill enables:

  • •Console inspection: View errors, warnings, and log messages
  • •Network analysis: Monitor XHR/fetch requests with full headers/body
  • •Performance tracing: Record and analyze performance traces
  • •JavaScript evaluation: Execute code in browser context
  • •Authenticated session debugging: Connect to existing logged-in browsers

When to Use This Skill

Use CaseThis Skillbrowser-discovery
Console error inspectionYesNo
Network request analysisYesLimited
Performance tracingYesNo
Authenticated sessionsYesNo
ScreenshotsNoYes
Form fillingNoYes
Basic navigationLimitedYes

Setup Requirements

Option 1: Connect to Existing Chrome (Recommended)

Start Chrome with remote debugging enabled:

bash
# 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

Set the environment variable:

bash
export CHROME_DEVTOOLS_URL=http://127.0.0.1:9222

Option 2: Chrome Auto-Connect (145+)

For Chrome 145+, enable remote debugging at chrome://inspect/#remote-debugging.

Progressive Disclosure Pattern

This skill uses progressive MCP disclosure for token efficiency:

code
Chrome DevTools MCP Server
         |
         v
Python Wrappers (.claude/ai-dev-kit/dev-tools/mcp_servers/chrome_devtools/)
         |
         v
Claude executes Python via Bash (on-demand)
         |
         v
Results returned (tools NOT in system prompt)

Benefits: 98%+ token reduction vs loading all MCP tools in system prompt.

Quick Examples

Get Console Errors

bash
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)
"

List Network Requests

bash
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)
"

Execute JavaScript

bash
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'Page title: {title}')
"

Debug Authenticated Session

bash
# 1. Log into the site manually in Chrome (started with --remote-debugging-port=9222)
# 2. Then analyze the authenticated state:

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

# List open tabs
pages = navigation.list_pages()
print(pages)

# Get auth tokens from localStorage
tokens = debug.evaluate_script('JSON.stringify(localStorage)')
print(f'localStorage: {tokens}')

# See recent API calls
api_calls = network.get_api_requests()
print(api_calls)
"

Available Tool Modules

console

  • •list_console_messages(types, page_size, page_idx) - Get console output
  • •get_console_message(message_id) - Get specific message details
  • •get_errors() - Convenience: get error messages only
  • •get_warnings() - Convenience: get warnings only

network

  • •list_network_requests(resource_types, page_size, page_idx) - List requests
  • •get_network_request(request_id) - Get full request/response details
  • •get_failed_requests() - Convenience: get 4xx/5xx requests
  • •get_api_requests() - Convenience: get XHR/fetch requests
  • •get_slow_requests(threshold_ms) - Convenience: get slow requests

performance

  • •start_trace(reload, auto_stop) - Start recording trace
  • •stop_trace() - Stop and get trace data
  • •get_insights() - Get available insight sets
  • •analyze_insight(insight_set_id, insight_name) - AI-powered insight analysis

debug

  • •evaluate_script(expression) - Execute JavaScript

navigation

  • •navigate_page(url, nav_type, ignore_cache, timeout) - Navigate page
  • •list_pages() - List all tabs
  • •select_page(page_idx, bring_to_front) - Switch to tab by index
  • •new_page(url, timeout) - Open new tab
  • •close_page(page_idx) - Close tab by index
  • •wait_for(text, timeout) - Wait for text on page

Red Flags

  • •Chrome not started with --remote-debugging-port=9222
  • •CHROME_DEVTOOLS_URL environment variable not set
  • •Port 9222 blocked by firewall
  • •Trying to use for screenshots (use browser-discovery instead)
  • •MCP server not installed (npx chrome-devtools-mcp@latest)

See Also