browser-debugging
Debug client-side issues using browser developer tools. Identify JavaScript errors, styling issues, and performance problems in the browser.
- Installs
- 540
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill browser-debugging- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads browser-debugging automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
FAQ
What does the browser-debugging skill do?
Debug client-side issues using browser developer tools. Identify JavaScript errors, styling issues, and performance problems in the browser.
How do I install browser-debugging?
Run npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill browser-debugging in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/browser-debugging/ (personal) or .claude/skills/browser-debugging/ (project).
Which AI agents can use browser-debugging?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is browser-debugging safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains browser-debugging?
It is published by aj-geddes in aj-geddes/useful-ai-prompts. It has 540 recorded installs.
More from aj-geddes/useful-ai-prompts
nodejs-express-server
aj-geddes/useful-ai-prompts
Build production-ready Express.js servers with middleware, authentication, routing, and database integration. Use when creating REST APIs, managing requests/responses, implementing middleware chains, and handling server logic.
code-review-analysis
aj-geddes/useful-ai-prompts
Perform comprehensive code reviews with best practices, security checks, and constructive feedback. Use when reviewing pull requests, analyzing code quality, checking for security vulnerabilities, or providing code improvement suggestions.
rest-api-design
aj-geddes/useful-ai-prompts
Design RESTful APIs following best practices for resource modeling, HTTP methods, status codes, versioning, and documentation. Use when creating new APIs, designing endpoints, or improving existing API architecture.
jenkins-pipeline
aj-geddes/useful-ai-prompts
Build Jenkins declarative and scripted pipelines with stages, agents, parameters, and plugins. Implement multi-branch pipelines and deployment automation.
architecture-diagrams
aj-geddes/useful-ai-prompts
Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.
ansible-automation
aj-geddes/useful-ai-prompts
Infrastructure automation and configuration management using Ansible playbooks, roles, and inventory. Use for deploying applications, patching, and managing servers.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.