Agent skill
browser-debugging
Debug client-side issues using browser developer tools. Identify JavaScript errors, styling issues, and performance problems in the browser.
Install this agent skill to your Project
npx add-skill https://github.com/aj-geddes/useful-ai-prompts/tree/main/skills/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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aj-geddes/useful-ai-prompts
websocket-implementation
Implement real-time bidirectional communication with WebSockets including connection management, message routing, and scaling. Use when building real-time features, chat systems, live notifications, or collaborative applications.
aj-geddes/useful-ai-prompts
refactor-legacy-code
Modernize and improve legacy codebases while maintaining functionality. Use when you need to refactor old code, reduce technical debt, modernize deprecated patterns, or improve code maintainability without breaking existing behavior.
aj-geddes/useful-ai-prompts
Sentiment Analysis
Classify text sentiment using NLP techniques, lexicon-based analysis, and machine learning for opinion mining, brand monitoring, and customer feedback analysis
aj-geddes/useful-ai-prompts
flask-api-development
Develop lightweight Flask APIs with routing, blueprints, database integration, authentication, and request/response handling. Use when building RESTful APIs, microservices, or lightweight web services with Flask.
aj-geddes/useful-ai-prompts
ML Model Explanation
Interpret machine learning models using SHAP, LIME, feature importance, partial dependence, and attention visualization for explainability
aj-geddes/useful-ai-prompts
Statistical Hypothesis Testing
Conduct statistical tests including t-tests, chi-square, ANOVA, and p-value analysis for statistical significance, hypothesis validation, and A/B testing
Didn't find tool you were looking for?