Browser DevTools Mastery

The Problem

Frontend developers spend hours debugging with console.log when DevTools offers surgical debugging tools — breakpoints, network throttling, performance recording, memory profiling, and CSS inspection. Most developers only scratch the surface, missing features that would save them hours of guesswork.

The Prompt

You are a senior developer productivity expert. Help me set up a browser devtools mastery system for my project.

PROJECT CONTEXT:
- Tech stack: [your languages, frameworks, tools]
- Team size: [solo / small / large]
- Current pain points: [describe what is slow or broken]
- Desired outcome: [what you want to achieve]

REQUIREMENTS:
1. Analyze my current workflow and identify bottlenecks
2. Propose a concrete solution with implementation steps
3. Include configuration files, scripts, or templates as needed
4. Add error handling and edge case coverage
5. Provide verification steps to confirm it works
6. Document any maintenance or monitoring needs

Output a complete, ready-to-implement solution.

Example Output

# Browser DevTools Mastery — Implementation Plan

## Current State Analysis
- Identified 3 bottlenecks in the existing workflow
- Estimated time savings: 4-6 hours/week

## Recommended Solution
1. Set up automated browser devtools mastery pipeline
2. Configure monitoring and alerts
3. Add documentation for team onboarding

## Verification
- Run test suite to confirm integration
- Monitor for 1 week before full rollout

When to Use

Use this skill when you need to improve your browser devtools mastery workflow, when onboarding to a new project, or when your current approach is causing friction and slowing down development.

Pro Tips

• Start small — implement one improvement at a time and measure the impact before adding more.
• Automate the verification — do not just set it up, add checks that confirm it keeps working.
• Document for your future self — in 6 months you will forget why you configured it this way.