mcp-chrome-devtools

Debug and profile web applications using the Chrome DevTools MCP server.

1|Updated Oct 18, 2025

Search Tags:#frontend #debug #mcp #profiling #chrome-devtools #web-inspection

Ready to run

npx skills add https://github.com/JimmyPaolini/monorepo --skill mcp-chrome-devtools-jimmypaolini

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mcp-chrome-devtools
Source: https://github.com/JimmyPaolini/monorepo/tree/main/documentation/skills/mcp-chrome-devtools
Command: npx skills add https://github.com/JimmyPaolini/monorepo --skill mcp-chrome-devtools-jimmypaolini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging, profiling, and inspecting frontend apps across Chrome/Chromium can be challenging without a cohesive tooling layer. This skill provides a unified workflow leveraging the Chrome DevTools MCP server to access CDP capabilities for runtime analysis and performance tuning.

Core Features & Use Cases

Live DOM inspection, console monitoring, and network analysis across Chrome and Chromium-based apps using MCP.
Performance profiling and memory insights to optimize frontend load times and user interactions.
Workflow guidance for common debugging scenarios in web applications, including navigation, evaluation, and visual checks.

Quick Start

Start the MCP server, connect your browser to the MCP endpoint, and begin debugging and profiling immediately.

Frequently Asked Questions about mcp-chrome-devtools

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

FAQPage Schema

How do I debug and inspect web applications using Chrome DevTools with MCP?▼

You can debug web apps by connecting Chrome or Chromium to the Chrome DevTools MCP server, enabling live DOM inspection, console monitoring, and network analysis through MCP tool commands.

Can I capture network logs and screenshots during frontend testing via MCP?▼

Yes, the Chrome DevTools MCP server supports capturing network logs and taking screenshots, allowing you to perform visual checks and runtime analysis during frontend testing workflows.

What's the best way to profile frontend performance and memory across Chromium environments?▼

Profiling frontend performance and memory is best handled via the Chrome DevTools MCP server, which provides performance profiling and memory insights to optimize load times and interactions.

Does MCP support evaluating selectors and navigating pages for runtime DOM analysis?▼

MCP supports runtime DOM analysis through tool commands for navigating pages, querying selectors, and evaluating scripts, enabling reliable debugging sessions across Chrome environments.

What do I need to set up before starting a Chrome DevTools debugging session?▼

To start a debugging session, you need to launch the MCP server and connect your Chrome or Chromium browser to the MCP endpoint, after which you can begin debugging immediately.

Are there limitations when using CDP capabilities for web inspection across different Chromium browsers?▼

While the MCP server leverages CDP capabilities for web inspection, its effectiveness depends on Chrome DevTools Protocol compatibility within your specific Chromium-based environment.