# Debug Web Applications with Chrome DevTools

Browser failures are difficult to diagnose when console, network, and performance evidence is scattered. This skill guides focused Chrome DevTools MCP investigations.

## Install

```bash
npx skillstore add consiliency/chrome-devtools-debugging
```

## Metadata

- Status: approved
- Slug: consiliency-chrome-devtools-debugging
- Skillstore revision: r1
- Version status: missing
- Tree hash: 0fb0f234ab781515da042b257ee11fcdc0f68d6907a8be1db6cca404f5fb64ab
- Author: Consiliency
- GitHub username: Consiliency
- License: MIT
- Repository: https://github.com/Consiliency/treesitter-chunker/tree/main/.ai-dev-kit/skills/chrome-devtools-debugging
- Ref: 635f69fb8d2f4e6330ba47a4e5a0fb239c04d110
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: network, scripts, external\_commands
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/consiliency-chrome-devtools-debugging
- Manifest: https://skillstore.pages.dev/api/skills/consiliency-chrome-devtools-debugging/manifest

## Capabilities

- Inspect console errors, warnings, messages, arguments, and stack traces.
- List browser requests and inspect request, response, header, body, status, and timing details.
- Record performance traces and analyze available insight sets.
- Evaluate JavaScript expressions within the selected browser page.
- Navigate pages, manage tabs, reload content, and wait for visible text.

## Use Cases

- Resolve Frontend Runtime Failures: Correlate console exceptions, stack traces, and application state to identify the first actionable browser error.
- Validate Login and API Flows: Inspect failed requests, status codes, timing, and redacted authentication signals during a controlled test session.
- Investigate Slow Page Loads: Capture a performance trace and compare slow requests, blocking resources, and available DevTools insights.

## Prompt Templates

### Inspect Console Errors

```
Connect to the current Chrome tab. List errors and warnings from the latest page load. Group duplicates and explain the likely first cause.
```

### Diagnose a Failed API Request

```
Find failed XHR and fetch requests for [workflow]. Inspect the relevant status, timing, and redacted response details. Correlate them with console errors.
```

### Analyze Page Performance

```
Record a fresh page-load trace for [page]. Identify slow requests and blocking resources. Rank the three highest-impact findings with supporting evidence.
```

### Correlate an Authenticated Failure

```
Investigate the authenticated failure on [page]. Use a dedicated test profile. Correlate console errors, failed requests, timing, and page state. Redact credentials and personal data. Explain the root-cause hypothesis and remaining evidence gaps.
```

## Limitations

- Chrome must expose a remote debugging endpoint, and the required MCP wrappers must be installed.
- Console, storage, cookies, headers, and response bodies can contain credentials or personal data.
- The skill does not provide screenshots, form filling, or general browser automation.
- Server-side causes remain unavailable unless browser evidence reveals them.

## Best Practices

- Use a dedicated temporary Chrome profile and test account for authenticated debugging.
- Start with narrow filters, then correlate console, network, and performance evidence by time and request.
- Redact cookies, tokens, authorization headers, personal data, and sensitive response bodies before reporting results.

## Anti Patterns

- Do not print complete browser storage, cookies, headers, or response bodies from real user sessions.
- Do not expose the remote debugging endpoint beyond loopback or leave it running after the investigation.
- Do not evaluate unreviewed scripts or execute mutable package versions in a trusted environment.

## Security Audit

- Audited at: 2026-07-13T15:46:12.134\+00:00
- Summary: Most static findings are false positives caused by Markdown formatting, reserved example URLs, localhost endpoints, and a normal Python import. The guides expose authenticated browser data, enable remote debugging on logged-in sessions, and recommend an unpinned NPM package. Publication should require version pinning and clear browser isolation and secret-handling safeguards.

## Stats

- Views: 226
- Downloads: 12
- Favorites: 0
- Popularity score: 0