# Debug Web Apps with Chrome DevTools

Frontend bugs can be hard to reproduce from code alone. This skill guides Claude, Codex, and Claude Code through Chrome DevTools MCP evidence gathering.

## Install

```bash
npx skillstore add eccentric-jamaican/dev-tools-skill
```

## Metadata

- Status: approved
- Slug: eccentric-jamaican-dev-tools-skill
- Skillstore revision: r1
- Version status: missing
- Tree hash: 080195e6e0b02b99fc5b3dab9402ab65d6e8f6908d6c6d734a404f4f18c6114b
- Author: Eccentric-jamaican
- GitHub username: Eccentric-jamaican
- License: MIT
- Repository: https://github.com/Eccentric-jamaican/insapp-new/tree/main/skills/dev-tools-skill
- Ref: 30c73eac2afe762f6aa9c4553158769369d47351
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/eccentric-jamaican-dev-tools-skill
- Manifest: https://skillstore.pages.dev/api/skills/eccentric-jamaican-dev-tools-skill/manifest

## Capabilities

- Selects Chrome pages and captures accessibility snapshots before diagnosis.
- Reviews console messages and network requests for failures, slow calls, CORS, and payload issues.
- Uses screenshots and read-only DOM queries to inspect UI layout, styles, and element state.
- Runs performance traces and analyzes Core Web Vitals insights such as LCP, FCP, and CLS.
- Suggests minimal CSS, JavaScript, API, or performance fixes with validation steps.

## Use Cases

- Diagnose UI Interaction Bugs: Inspect snapshots, screenshots, computed styles, and browser interactions to find layout or click problems.
- Investigate Failed Browser Flows: Review console errors and network requests to identify failing endpoints, payload issues, or CORS problems.
- Triage Slow Web Pages: Run performance traces, analyze top insights, and connect them to asset, script, or layout bottlenecks.

## Prompt Templates

### Inspect a Basic UI Bug

```
Use the DevTools skill to inspect this page and explain why the button does not respond. Please describe each step in plain language.
```

### Find a Failed Request

```
Use the DevTools skill to review console and network evidence for this failed login flow. Find the first failing request and suggest a minimal fix.
```

### Trace a Slow Page

```
Use the DevTools skill to run a performance trace with reload, identify the top insight, and connect it to network or layout evidence.
```

### Compare Responsive Layouts

```
Use the DevTools skill to compare desktop and mobile layouts, inspect computed styles, reproduce the interaction, and propose a reversible patch plan.
```

## Limitations

- Requires a working Chrome DevTools MCP connection and an accessible target page.
- Does not replace full browser automation tests or manual quality assurance.
- May need user confirmation before form submission or destructive browser actions.
- Cannot diagnose server-side defects unless browser evidence exposes the failure.

## Best Practices

- Start with a snapshot, console messages, and network requests before changing code.
- Keep DOM scripts read-only unless the user approves a controlled mutation.
- Summarize evidence, likely cause, smallest fix, and validation steps.

## Anti Patterns

- Submitting forms or triggering destructive actions without explicit user confirmation.
- Jumping to a code change before collecting browser evidence.
- Running broad DOM mutations during diagnosis when observation is enough.

## Security Audit

- Audited at: 2026-07-05T14:42:48.873\+00:00
- Summary: All static findings were false positives caused by Markdown inline code for DevTools MCP tool names or benign debugging guidance. No prompt injection, data exfiltration intent, or malicious automation instructions were found. The skill emphasizes evidence gathering, read-only inspection where possible, and confirmation before destructive actions.

## Stats

- Views: 237
- Downloads: 22
- Favorites: 0
- Popularity score: 0