Browser Debugging

aj-geddes/useful-ai-prompts/skills/browser-debugging

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

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

Instructions onlySoftware Development

AI-generated overview

Guides debugging of client-side browser issues such as JavaScript errors, styling problems, and performance issues.

What it does: This skill provides guidance for diagnosing and fixing client-side problems in the browser using developer tools. It covers JavaScript errors, layout and styling issues, performance problems, user interaction issues, network request failures, and animation glitches. It points to reference guides on DevTools fundamentals, debugging techniques, common issues and solutions, and performance debugging.
When to use it: Use it when a web page or client-side application misbehaves and you need to investigate in the browser. It fits JavaScript errors, layout or styling problems, performance slowdowns, interaction bugs, failed network requests, and animation glitches.
Requirements: No scripts are shipped; it is instructions and reference documents only. It assumes access to browser developer tools such as Chrome DevTools.

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)

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 [blocked]	Browser DevTools Fundamentals
Debugging Techniques [blocked]	Debugging Techniques
Common Issues & Solutions [blocked]	Common Issues & Solutions
Performance Debugging [blocked]	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

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/browser-debuggingat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Browser Debugging

Browser Debugging

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices