browser-debugging

Debug client-side issues using browser developer tools. Identify JavaScript errors, styling issues, and performance problems in the browser.

INSTALLATION
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill browser-debugging
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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:

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:

GuideContents
Browser DevTools FundamentalsBrowser DevTools Fundamentals
Debugging TechniquesDebugging Techniques
Common Issues & SolutionsCommon Issues & Solutions
Performance DebuggingPerformance 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
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card