chrome-devtools

Automate browser interactions and debugging via Chrome DevTools MCP.

1|Updated May 4, 2026

Search Tags:#automation #performance #debugging #network #browser #screenshot #chrome-devtools

Ready to run

npx skills add https://github.com/beel-collab/presets.dev --skill chrome-devtools-beel-collab

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/beel-collab/presets.dev/tree/main/skills/chrome-devtools
Command: npx skills add https://github.com/beel-collab/presets.dev --skill chrome-devtools-beel-collab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers and QA engineers to automate browser tasks, debug web pages, and analyze performance using Chrome DevTools MCP, reducing manual effort and speeding up iterative testing.

Core Features & Use Cases

Navigation & Page Management: Open new pages, navigate URLs, switch contexts, and manage multiple tabs.
Interaction & Debugging: Click, fill forms, hover, evaluate scripts, and inspect console and network traffic.
Performance & Emulation: Start/stop performance traces, analyze insights, and emulate viewport or network conditions for responsive testing.
Use Case: Example: automatically open a page, log console messages, capture a screenshot, and generate a performance report.

Quick Start

Open a new page to https://example.com, take a snapshot to locate the login button, then click the button to proceed.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema

How do I automate browser interactions and debug web pages with Chrome DevTools?▼

Automate browser interactions and debug web pages using Chrome DevTools MCP to navigate URLs, click elements, fill forms, evaluate scripts, and inspect console logs. This enables live page automation, visual verification, and iterative testing without manual browser interaction.

What is the best way to capture a performance trace and analyze network traffic for a web page?▼

Capture a performance trace and analyze network traffic by starting and stopping performance profiling through Chrome DevTools MCP. You can analyze generated insights, inspect network requests, and emulate viewport or network conditions to conduct responsive testing.

Does Chrome DevTools automation support taking page snapshots and screenshots for visual verification?▼

Chrome DevTools automation supports taking page snapshots and screenshots for visual verification. You can open a page, take a snapshot to locate elements like buttons, interact with them, and capture the visual state to verify functional requirements.

Can I use Chrome DevTools to manage multiple browser tabs and switch contexts during automated testing?▼

You can use Chrome DevTools to manage multiple browser tabs and switch contexts during automated testing. It provides navigation and page management capabilities to open new pages, switch between tabs, and control script-driven execution across web pages.

How do I evaluate scripts and inspect console messages on a live page?▼

Evaluate scripts and inspect console messages on a live page by leveraging Chrome DevTools debugging primitives. The MCP allows you to execute custom JavaScript, retrieve console logs, and interact with page elements to identify and resolve functional issues.