Skip to main content
affpapa.org
RU EN
skill CX Codex

browser-debugging — Claude Code skill: debug in the browser

A skill for chasing client-side bugs: JavaScript errors, broken layouts, slow pages. Useful when something misbehaves and the cause isn't obvious.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add aj-geddes/useful-ai-prompts --skill browser-debugging -a claude-code
Open on GitHub

What browser-debugging does

The skill covers browser developer tools. It walks through the DevTools tabs: Elements for HTML structure and computed styles, Console for errors and logs, Sources for breakpoints and variable watches, Network for requests. Performance gets its own section.

Four reference files sit in references/: DevTools fundamentals, debugging techniques, common issues and fixes, and performance debugging. The skill doesn't drive a browser on its own — it tells the agent what to inspect and in what order, so it pays off when you already have DevTools open next to your editor.

Install runs through npx skills add for Claude, Codex, Cursor, Gemini CLI and OpenCode; GitHub Copilot uses gh skill install instead. MIT licensed, so editing the reference files is fair game.

What it helps with

  • trace where a JavaScript error on the page comes from
  • figure out why a layout block shifted
  • catch a slow request in the Network tab
  • set a breakpoint and step through the call stack
  • find what makes an animation stutter

Example prompts for the agent

  • Help me debug: a script throws on this page, check the Console and explain the cause
  • The button drifts right on mobile widths — dig into Elements and computed styles
  • This page loads slowly, go through Network and Performance and tell me what's blocking

How to install browser-debugging

1Skills CLI (Vercel)

npx skills add aj-geddes/useful-ai-prompts --skill browser-debugging -a claude-code

2Manually: put the files in place

~/.claude/skills/browser-debugging/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/browser-debugging/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about browser-debugging

How do I install browser-debugging in Claude?

Run npx skills add aj-geddes/useful-ai-prompts --skill browser-debugging -a claude-code. The skill file lands at ~/.claude/skills/browser-debugging/SKILL.md.

What does browser-debugging do?

It guides the agent through browser developer tools to track down client-side problems: JavaScript errors, styling issues, failing requests and performance drops.

Which platforms support the skill?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Copilot takes a different command: gh skill install aj-geddes/useful-ai-prompts browser-debugging.

Source text

SKILL.md · MIT 
---
name: browser-debugging
description: >
  Debug client-side issues using browser developer tools. Identify JavaScript
  errors, styling issues, and performance problems in the browser.
---

# Browser Debugging

## Table of Contents

- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)

## Overview

Browser debugging tools help identify and fix client-side issues including JavaScript errors, layout problems, and performance issues.

## When to Use

- JavaScript errors
- Layout/styling issues
- Performance problems
- User interaction issues
- Network request failures
- Animation glitches

## Quick Start

Minimal working example:

```yaml
Chrome DevTools Tabs:

Elements/Inspector:
  - Inspect HTML structure
  - Edit HTML/CSS in real-time
  - View computed styles
  - Check accessibility tree
  - Modify DOM

Console:
  - View JavaScript errors
  - Execute JavaScript
  - View console logs
  - Monitor messages
  - Clear errors

Sources/Debugger:
  - Set breakpoints
  - Step through code
  - Watch variables
  - Call stack view
  - Conditional breakpoints

Network:
  - View all requests
// ... (see reference guides for full implementation)
```

## Reference Guides

Detailed implementations in the `references/` directory:

| Guide | Contents |
|---|---|
| [Browser DevTools Fundamentals](references/browser-devtools-fundamentals.md) | Browser DevTools Fundamentals |
| [Debugging Techniques](references/debugging-techniques.md) | Debugging Techniques |
| [Common Issues & Solutions](references/common-issues-solutions.md) | Common Issues & Solutions |
| [Performance Debugging](references/performance-debugging.md) | Performance Debugging |

## Best Practices

### ✅ DO

- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying

### ❌ DON'T

- Skip testing or validation
- Ignore error handling
- Hard-code configuration values

© aj-geddes · MIT · aj-geddes/useful-ai-prompts

Similar skills

Everything for Frontend and UI →
cookie-debugging ChromeDevTools Skill for inspecting cookies, sessions, and authentication errors via Chrome DevTools MCP. Diagnoses 401/403, auth redirects, Set-Cookie issues, and verifies cookie consent compliance. CX Codex +1 870installs browser-trace browserbase Attaches a second CDP client to a browser session that is already running, records the whole DevTools stream to disk, and splits it so you can search a failed run. CX Codex +1 3,000installs frontend-testing-debugging official OpenAI Guides coding agents through structured frontend testing, UI checks, and bug investigations. Runs validation loops using Browser tools or local Playwright. CX Codex GP ChatGPT 159installs browser-testing-with-devtools addyosmani Connects your coding agent to Chrome via DevTools MCP. Helps inspect the live DOM, catch console errors, check network payloads, and visually verify UI fixes. CX Codex +1 58,600installs chrome-devtools official github Controls a live Chrome browser through Chrome DevTools MCP for page actions, debugging, and performance traces. Use it when an agent needs to inspect a web interface. 15,258installs d3k vercel-labs Runs a project dev server and a monitored browser with a shared chronological event timeline. Helps developers and agents debug local web app issues. CX Codex +1 859installs

From the same set118

process-mapping A skill that walks the agent through documenting a current workflow, spotting bottlenecks and designing an improved version. CX Codex +1 552installs memory-optimization A skill for profiling application memory, finding leaks and cutting the footprint. Useful when a process keeps growing or dies with out of memory. CX Codex +1 544installs web-performance-audit This skill measures page load times, finds bottlenecks and points at what to fix. Useful after a big release or when users complain about slowness. CX Codex +1 543installs semantic-versioning A skill for automated SemVer versioning: conventional commits, semantic-release and changelog generation. CX Codex +1 542installs design-system-creation A skill that lays out a design system: tokens, components, docs and governance. Useful once you have more than one interface or team. CX Codex +1 537installs Causal Inference A skill that walks your agent through causal effect estimation: propensity scores, instrumental variables, causal graphs. Useful when a randomized experiment isn't an option. CX Codex +1 534installs code-generation-template A skill for generating code from templates: project scaffolding, boilerplate, AST-based generation and template engines. Useful when you need to produce repetitive code fast. CX Codex +1 532installs grpc-service-development This skill walks your agent through gRPC service work: Protocol Buffers contracts, four call patterns, servers in Node.js and Python. CX Codex +1 527installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor