Chrome DevTools Skill

Overview

The Chrome DevTools skill integrates the official Chrome DevTools Protocol (CDP) MCP server to enable comprehensive browser inspection, debugging, and performance analysis during frontend development. This skill provides access to 26 Chrome DevTools tools across navigation, automation, performance profiling, network monitoring, console debugging, and visual inspection.

Use this skill when working on frontend applications to inspect live pages, debug JavaScript errors, analyze performance bottlenecks, monitor network requests, or capture visual state.

When to Use This Skill

Activate this skill when:

• Visual inspection needed - Checking page layout, taking screenshots, verifying UI rendering
• Console debugging required - Investigating JavaScript errors, warnings, or log messages
• Performance analysis requested - Identifying slow page loads, long tasks, or resource bottlenecks
• Network monitoring desired - Inspecting HTTP requests, API calls, or loading issues
• Localhost development - Testing local frontend applications during development

Typical scenarios include debugging a React app, optimizing page load speed, verifying API integration, checking responsive design, or validating frontend changes.