skills.rest
kriscard
kriscardCOMMUNITY
Explore all skills by this author →
Website𝕏@kris_cardGitHub

Chrome DevTools

Inspect, debug, and profile web pages via Chrome DevTools MCP tools.

13|2|Updated Jan 5, 2026
Search Tags:#automation#cdp#headless#chrome-devtools#performance-analysis#network-inspection#frontend-debugging
One-click install
npx skills add https://github.com/kriscard/kriscard-claude-plugins --skill chrome-devtools-kriscard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Chrome DevTools
Source: https://github.com/kriscard/kriscard-claude-plugins/tree/main/plugins/chromedev-tools/skills/chrome-devtools
Command: npx skills add https://github.com/kriscard/kriscard-claude-plugins --skill chrome-devtools-kriscard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools MCP-based tooling provides programmatic access to browser inspection, debugging, performance profiling, and network tracing for frontend developers.

Core Features & Use Cases

  • Access 26 Chrome DevTools tools across navigation, input automation, performance, network, debugging, and emulation to automate frontend workflows.
  • Support comprehensive page inspection, console debugging, network monitoring, performance tracing, and visual verification in headless or local development environments.
  • Typical scenarios include debugging React or other SPA apps, tracing network calls, taking screenshots, and validating UI states.

Quick Start

Install the chrome-devtools MCP plugin and run the /chromedev:inspect command with a target URL to start a full page inspection.

Frequently Asked Questions about Chrome DevTools

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

FAQPage Schema
How do I automate frontend debugging and network inspection for a web page?▼

Automate frontend debugging and network inspection by running the /chromedev:inspect command with a target URL to programmatically access page inspection, console logs, and network tracing results.

Can I profile web page performance in a headless Chrome environment?▼

Profile web page performance in headless Chrome environments by executing the /chromedev:performance command to generate structured performance tracing results without external setup.

What is the best way to capture screenshots for visual verification of UI states?▼

The best way to capture screenshots for visual verification of UI states is using the /chromedev:screenshot command to return structured visual output from local development or headless environments.

Does this approach support tracing network calls and input automation for SPA apps?▼

This approach supports tracing network calls and input automation for SPA apps by providing programmatic access to 26 Chrome DevTools tools covering navigation, input automation, and network monitoring.

Do I need external dependencies to start debugging React or other SPA apps?▼

No external dependencies are needed to start debugging React or other SPA apps; simply activate the skill to access console debugging, network analysis, and page inspection workflows.

What are the limitations of using Chrome DevTools MCP-based tooling for frontend workflows?▼

Chrome DevTools MCP-based tooling is limited to frontend workflows such as page inspection, network analysis, performance profiling, and visual verification, and does not extend to backend server debugging.

Related Skills

Explore More Software Engineering Skills→
STier-AiSTier-Ai
5

webapp-testing

Automate local web application testing with Playwright scripts.

Official
Intermediate
pacphipacphi
14

Chrome DevTools

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

Community
Advanced
kozyszookozyszoo
1

ui-verify

Detect frontend changes and run browser automation tests for UI verification.

Community
Advanced
eric-sabeeric-sabe
1

chrome-devtools

Automate browser interactions and inspect live web pages via Chrome DevTools.

Community
Intermediate