browser-debugging
Debug client-side issues using browser developer tools. Identify JavaScript errors, styling issues, and performance problems in the browser.
How do I install this agent skill?
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill browser-debuggingIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill provides reference materials and best practices for debugging client-side web applications using browser developer tools. No security risks were detected.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerpass
6 files scanned · No issues
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
Browser Debugging
Table of Contents
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
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/aj-geddes/useful-ai-prompts/browser-debugging">View browser-debugging on skillZs</a>