chrome-devtools

name	chrome-devtools
description	Browser automation, debugging, performance profiling, and DevTools-driven diagnostics via Playwright
layer	utility
category	tooling
triggers	["open browser","inspect page","debug in browser","performance profile","lighthouse audit","network requests","console errors","test in browser"]
inputs	[{"url":"Target URL to inspect or automate"},{"action":"inspect | profile | automate | debug | audit"},{"selectors":"CSS selectors for specific elements (optional)"}]
outputs	[{"inspection_results":"Page structure, accessibility tree, computed styles"},{"performance_data":"Load times, resource sizes, rendering metrics"},{"console_logs":"Captured browser console output"},{"network_log":"HTTP request/response log"},{"screenshots":"Visual captures of page state"},{"automation_result":"Result of browser automation scripts"}]
linksTo	["ui-ux-pro","ai-multimodal","error-handling"]
linkedFrom	["orchestrator","planner"]
preferredNextSkills	["ui-ux-pro","error-handling"]
fallbackSkills	["ai-multimodal"]
riskLevel	low
memoryReadPolicy	selective
memoryWritePolicy	selective
sideEffects	[{"browser_state":"Opens and interacts with browser instances"},{"network":"Makes HTTP requests to target URLs"}]

Chrome DevTools

Purpose

This skill provides browser-based debugging, inspection, performance profiling, and automation capabilities via Playwright MCP. It enables direct interaction with web pages — navigating, clicking, reading content, capturing screenshots, monitoring network requests, and evaluating JavaScript — all without requiring a manual browser session.

Key Concepts

Available Capabilities

Through Playwright MCP, this skill can:

Capability	Tools	Use Case
Navigation	browser_navigate, browser_navigate_back	Load pages, follow flows
Inspection	browser_snapshot, browser_take_screenshot	Read page structure, capture visual state
Interaction	browser_click, browser_type, browser_fill_form	Automate user actions
Evaluation	browser_evaluate	Run JavaScript in page context
Monitoring	browser_console_messages, browser_network_requests	Capture logs and network traffic
Waiting	browser_wait_for	Wait for content to appear/disappear
Tabs	browser_tabs	Manage multiple pages

Snapshot vs Screenshot

• Snapshot (browser_snapshot): Returns the accessibility tree as structured text. Best for understanding page structure, finding interactive elements, and getting element references for actions. Use this for most inspection tasks.
• Screenshot (browser_take_screenshot): Returns a visual image. Best for visual regression checking, capturing current state for review, and when the visual layout matters more than the DOM structure.

Rule: Use snapshot first to understand the page, screenshot to capture visual evidence.

Workflows

Workflow 1: Page Inspection

STEP 1: Navigate to the target URL
  → browser_navigate(url)

STEP 2: Capture the accessibility snapshot
  → browser_snapshot()
  → Analyze the page structure, identify key elements

STEP 3: Take a screenshot for visual reference
  → browser_take_screenshot(type: "png")

STEP 4: Check console for errors
  → browser_console_messages(level: "error")

STEP 5: Check network requests
  → browser_network_requests(includeStatic: false)

OUTPUT:
  PAGE STRUCTURE: [From snapshot]
  VISUAL STATE: [Screenshot reference]
  ERRORS: [Console errors found]
  FAILED REQUESTS: [4xx/5xx responses]
  RECOMMENDATIONS: [Based on findings]