Graysurf Agent Kit Chrome Devtools Debug Companion

Chrome DevTools Debug Companion

Contract

Prereqs:

• mcp_servers.chrome-devtools must be available and connectable.
• A reproducible target flow (URL + steps) or existing evidence from Playwright (trace, screenshot, failing step, error message).

Inputs:

• Target URL/environment and reproduction steps.
• Problem signal (error text, failing UI behavior, network symptom, performance symptom, or flaky step).
• Optional Playwright artifacts (trace/video/screenshot/log) to narrow investigation.

Outputs:

• A root-cause oriented debug summary backed by observed browser evidence.
• Actionable remediation suggestions and a Playwright follow-up check list.

Exit codes:

• N/A (interactive MCP workflow; no repo scripts)

Failure modes:

• mcp_servers.chrome-devtools is missing/unavailable/times out (must stop and report; no non-browser fallback).
• The issue cannot be reproduced in a comparable environment (auth walls, feature flags, data dependency, geo/device mismatch).

Purpose

• This skill is no longer a site-search workflow.
• It is a Chrome-focused debug companion that complements Playwright by exposing low-level runtime evidence during investigation.

Playwright vs DevTools (Decision Table)

Workflow

1. Start from reproducible evidence

   • Prefer existing Playwright evidence first (failed step, trace, screenshot, error text).
   • If no evidence exists, ask for URL + exact reproduction steps before debugging.

2. Reproduce in mcp_servers.chrome-devtools

   • Open the target page and replay the smallest flow that still reproduces the issue.
   • Keep one tab dedicated to reproduction and one tab for comparison (baseline route or prior state) when useful.

3. Capture layered diagnostics

   • Console: errors/warnings with message, stack, and repeat count.
   • Network: failed/slow requests, status codes, response headers, payload clues, and request initiator chain.
   • Rendering/UI: DOM state, computed style, layout shifts, visibility/overlap issues, and event-target mismatches.
   • Runtime/perf: long tasks, waterfall bottlenecks, resource contention, and script hotspots.
   • Storage/session context: cookies, local/session storage, cache/service worker side effects when relevant.

4. Isolate root cause

   • Validate one hypothesis at a time (for example: blocked API, race condition, stale cache, CSS stacking context, hydration mismatch).
   • Prefer smallest reversible toggles and record what changed and what did not.

5. Hand off fix guidance + verification plan

   • Provide root cause statement, impacted scope, suggested fix direction, and residual risk.
   • Include Playwright follow-up checks to prevent regressions after the fix.

Command Patterns

Use these concise prompt patterns when running the skill:

Open <url> in chrome-devtools, reproduce <issue>, then list console errors with stack traces.

Inspect network for <failing action>; return failed/slow requests with method, status, URL, and initiator.

Diagnose why <element/interaction> fails: verify DOM presence, computed style, overlap, and event target path.

Profile page load for <route>; report largest bottlenecks and one prioritized optimization candidate.

Guardrails

• Do not position this skill as a Playwright replacement; use it as a diagnostic complement.
• Do not claim a root cause without direct browser evidence observed during this run.
• If reproducing requires sensitive data or privileged access, ask for safe redaction/approval boundaries first.
• If MCP browser control is unavailable, stop and report the exact blocker and next enablement step.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.