Marketplace dev-tools-skill

Use when the user says "use the DevTools skill" or when they need help debugging a web app with Chrome DevTools MCP (UI bugs, incorrect behavior, console errors, network/API failures, or performance/lag), especially if the user seems inexperienced and needs guided, step-by-step diagnosis.

install

source · Clone the upstream repo

git clone https://github.com/aiskillstore/marketplace

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/eccentric-jamaican/dev-tools-skill" ~/.claude/skills/aiskillstore-marketplace-dev-tools-skill && rm -rf "$T"

manifest: skills/eccentric-jamaican/dev-tools-skill/SKILL.md

source content

Dev Tools Skill

Overview

Use the Chrome DevTools MCP server to diagnose and fix frontend issues by observing the live page, gathering evidence (console, network, performance), and proposing targeted code changes.

Quick Start

Confirm the user wants DevTools used (or they already asked).
Open the target page, then take an a11y snapshot.
Triage via console + network + quick DOM inspection.
Choose the appropriate workflow below and follow it end-to-end.
Summarize findings + propose the smallest safe fix.

Workflow Decision Tree

UI/interaction bug (layout, hover/click, missing text): use UI/Interaction Workflow.
Performance/lag (slow load, jank, long TTI): use Performance Workflow.
API/network issue (failed fetch, wrong data): use Network Workflow.
Runtime error (crash, blank screen, stack trace): use Console/Error Workflow.

Core Workflows

1) Triage (always first)

Capture state:
```
list_pages
```
→
```
select_page
```
→
```
take_snapshot
```
.
Scan for visible errors (missing sections, broken layout) in snapshot text.
Check console messages (
```
list_console_messages
```
, then
```
get_console_message
```
for details).
Check network requests (
```
list_network_requests
```
, then
```
get_network_request
```
for errors/slow calls).
Form a hypothesis and select a workflow below.

2) UI/Interaction Workflow

Use
```
take_snapshot
```
to locate the target element; if unclear,
```
take_screenshot
```
.
Inspect element text/attributes via
```
evaluate_script
```
(read-only DOM queries).
Reproduce the issue with
```
click
```
,
```
hover
```
, or
```
press_key
```
.
If layout is involved, measure box sizes/positions via
```
evaluate_script
```
.
Propose minimal CSS/JS fixes; if unsure, ask 1 targeted question.

3) Performance Workflow

Run a trace:

performance_start_trace

(reload=true) → reproduce →

performance_stop_trace

Identify top issue via
```
performance_analyze_insight
```
.
Correlate with network timings and large asset loads.
Recommend fixes: reduce bundle size, defer non-critical JS, optimize images, avoid layout thrash.

4) Network Workflow

List requests and find failures/slow endpoints.
Open failing request details (
```
get_network_request
```
), capture status, timing, payload.
Cross-check console for CORS or runtime fetch errors.
Suggest fixes: endpoint URL, headers/auth, payload shape, caching, retries.

5) Console/Error Workflow

Read console errors and stack traces in full.
Identify the first failing module/function; map to code location if possible.
Confirm if error is user-triggered vs load-time.
Suggest smallest code change + safe rollback steps.

UX & Safety Rules

Explain actions in plain language; assume the user is less experienced.
Avoid submitting forms or destructive actions without explicit user confirmation.
Keep fixes minimal and reversible; call out any risk.

References

See
```
references/mcp-cheatsheet.md
```
for MCP command usage.
See
```
references/debug-workflows.md
```
for detailed steps and examples.
See
```
references/performance.md
```
for perf triage patterns.
See
```
references/network.md
```
for network debugging patterns.
See
```
references/ui-debug.md
```
for DOM/layout debugging tips.