skills.rest
LuminairPrime
LuminairPrimeCOMMUNITY
Explore all skills by this author →
GitHub

mcp-chrome-devtools

Debug and automate web pages through the Chrome DevTools interface.

Updated May 16, 2026
Search Tags:#web automation#Chrome DevTools#performance analysis#network analysis#browser debugging
One-click install
npx skills add https://github.com/LuminairPrime/skill-tree-chopper --skill mcp-chrome-devtools-luminairprime
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-chrome-devtools
Source: https://github.com/LuminairPrime/skill-tree-chopper/tree/main/vendors/s-hiraokuvscode-sidebar-terminal/.claude/skills/mcp-chrome-devtools
Command: npx skills add https://github.com/LuminairPrime/skill-tree-chopper --skill mcp-chrome-devtools-luminairprime

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the process of debugging and automating web pages using Chrome DevTools, making it easier to inspect, interact, and analyze web applications.

Core Features & Use Cases

  • Browser Debugging: Offers a comprehensive suite of tools for inspecting web pages, network requests, and console messages.
  • Automation: Automate tasks like page interaction, screenshot capture, and performance analysis.
  • Use Case: Debugging performance issues in a web application by automatically capturing screenshots, profiling performance, and interacting with elements on the page.

Quick Start

Execute the command take_snapshot to capture the accessibility tree of the current page for interaction.

Frequently Asked Questions about mcp-chrome-devtools

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

FAQPage Schema
How do I automate web page debugging and capture performance traces using Chrome DevTools?▼

Browser debugging and automation tasks like page navigation, element interaction, and performance tracing are handled through a Chrome DevTools interface. It allows you to capture screenshots, profile performance, and inspect console logs directly.

What is the best way to inspect network requests and debug console logs for web applications?▼

Inspecting network requests and debugging console logs is achieved by interfacing directly with Chrome DevTools. This provides a comprehensive suite of tools to analyze web applications, inspect elements, and review network activity.

Can I use this Chrome DevTools interface with existing web automation frameworks?▼

Yes, the Chrome DevTools interface supports a wide range of DevTools features and is explicitly compatible with various web automation frameworks. This allows you to integrate browser debugging and element interaction into your existing workflows.

How do I start interacting with web page elements using Chrome DevTools automation?▼

To start interacting with web page elements, execute the `take_snapshot` command. This captures the accessibility tree of the current page, providing the structural context needed to automate element interaction and page navigation.

Does browser debugging with this tool support automated screenshot capture?▼

Yes, automated screenshot capture is fully supported as part of the browser debugging and automation capabilities. You can programmatically capture screenshots while navigating pages or interacting with web elements.

Related Skills

Explore More Software Engineering Skills→
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
timogilvietimogilvie

frontend-testing

Automate frontend UI testing via Chrome DevTools Protocol with screenshots and performance tracing.

Community
Intermediate
eyadsibaieyadsibai
7

webapp-testing

Automate web application testing with Playwright for browser automation and UI interaction.

Community
Intermediate
huuhiep0303huuhiep0303

browser-testing-with-devtools

Test web applications in real browsers using Chrome DevTools.

Community
Advanced