Browser Debugging

Helps you work through client-side bugs using browser DevTools across Chrome, Firefox, and Safari. Covers the core tabs you actually use: Elements for DOM inspection and CSS tweaks, Console for errors and logging, Sources for breakpoints and stepping through code, Network for request debugging, and Performance for profiling. The reference guides break down debugging techniques, common issues like CORS errors and memory leaks, and performance optimization patterns. Honestly, this is more of a structured reference than something that teaches debugging intuition, but having the DevTools features and workflows documented in one place beats hunting through browser documentation when you need to remember how conditional breakpoints work or what that obscure Performance tab metric means.

skills.sh installs: 545
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill browser-debugging --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

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)