skills.rest
pacphi
pacphiCOMMUNITY
Explore all skills by this author →
𝕏@fastnsilverGitHub

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

14|4|Updated Nov 22, 2025
Search Tags:#performance#debugging#network#chrome-devtools
One-click install
npx skills add https://github.com/pacphi/sindri --skill chrome-devtools-pacphi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Chrome DevTools
Source: https://github.com/pacphi/sindri/tree/main/docker/lib/extensions/vf-chrome-devtools/resources
Command: npx skills add https://github.com/pacphi/sindri --skill chrome-devtools-pacphi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill offers Claude direct access to Chrome DevTools MCP for performance, network, and DOM inspection.

Core Features & Use Cases

  • Performance Tracing: Record traces and analyze bottlenecks.
  • Network Analysis: Inspect requests, responses, and CORS.
  • DOM Inspection: Query and verify page structure.

Quick Start

Start a performance trace on http://localhost:3001 for 10 seconds.

Frequently Asked Questions about Chrome DevTools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug performance issues in web applications?▼

Performance debugging with Chrome DevTools involves starting a trace to record execution data, then analyzing bottlenecks in CPU, memory, and rendering. This Skill provides direct MCP access to performance_start_trace and coverage analysis to identify slow functions and unused code.

Can I inspect network requests and responses programmatically?▼

Yes. Network analysis via Chrome DevTools MCP lets you inspect requests, responses, headers, and CORS issues automatically. The network_get_requests function retrieves detailed traffic data for debugging API calls and resource loading.

How do I query and verify DOM structure during testing?▼

DOM inspection with Chrome DevTools MCP uses dom_query_selector and dom_get_computed_style to verify page structure and CSS properties programmatically. This enables automated verification of layout, styling, and element presence across web applications.

What's the best way to automate browser debugging tasks?▼

Automation through Chrome DevTools MCP orchestrates predefined functions like console_get_messages, runtime_evaluate, and page_screenshot without manual browser interaction. This integrates Chromium-based browser control into AI-assisted workflows.

Does this work with MCP server integration?▼

Yes. This Skill is built on MCP server integration, providing tool orchestration via predefined functions. It satisfies requirements for connecting Claude directly to Chrome DevTools for debugging, tracing, and analysis tasks.

Can I measure code coverage automatically?▼

Code coverage measurement is supported through coverage_start and coverage_stop functions, which track executed and unused code paths. This identifies untested code branches in your web application.

Related Skills

Explore More Software Engineering Skills→
eykdeykd

web-browser

Control Chrome/Chromium via Chrome DevTools Protocol for navigation, screenshots, JavaScript, and element inspection.

Community
Advanced
Prathmesh2000Prathmesh2000
1

observability-engineer

Instrument JSON logs, OpenTelemetry traces, and metrics for cloud-native observability.

Community
Advanced
githubgithub
37.6k

chrome-devtools

Automate browser control and debugging via the Chrome DevTools MCP.

Official
Advanced
krzemienskikrzemienski
2

chrome-devtools

Diagnose performance, network, and DOM issues using Chrome DevTools MCP.

Community
Advanced