browser-debugging

SKILL.md

Browser Debugging

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

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:

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
Browser DevTools Fundamentals

Debugging Techniques
Debugging Techniques

Common Issues & Solutions
Common Issues & Solutions

Performance Debugging
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

1d:[