Browser Dev Tools

Overview

This skill provides Chrome DevTools Protocol tools for validating and debugging browser-rendered artifacts during development. Use these tools to verify that localhost servers are rendering correctly and to debug visual issues proactively.

The tools connect to Chrome running on port :9222 with remote debugging enabled.

When to Use This Skill

Use this skill proactively in these scenarios:

1. After making frontend code changes - Validate that React, Bun, HTML, or other frontend code renders correctly on localhost
2. After starting a dev server - Verify the application loads and displays properly
3. When debugging browser rendering issues - Inspect page state, DOM structure, or cookies
4. When validating UI changes - Take screenshots to visually confirm changes appear as expected

Important: Always use this skill proactively after completing frontend development tasks to validate the work before considering it done.