skills.rest
YanBerdin
YanBerdinCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate Chrome browser navigation, interaction, and performance profiling via DevTools MCP.

2|Updated May 19, 2024
Search Tags:#automation#chrome-devtools#network-inspection#performance-tracing#web-debugging
One-click install
npx skills add https://github.com/YanBerdin/next-portfolio --skill chrome-devtools-yanberdin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/YanBerdin/next-portfolio/tree/main/.github/skills/chrome-devtools
Command: npx skills add https://github.com/YanBerdin/next-portfolio --skill chrome-devtools-yanberdin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables automated control, inspection, and performance analysis of a live Chrome browser via the Chrome DevTools MCP, reducing manual debugging time and enabling repeatable workflows.

Core Features & Use Cases

  • Navigation & Interaction: open pages, click elements, fill forms, and handle dialogs.
  • Debugging & Inspection: inspect console messages, execute scripts in page context, and analyze network activity.
  • Visualization & Profiling: capture screenshots and record performance traces to identify bottlenecks and optimize Core Web Vitals.
  • Emulation: resize viewports and simulate network and CPU conditions for responsive testing.

Quick Start

Launch the Chrome DevTools agent and perform an automated navigation to a target URL, then run a performance trace.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate Chrome DevTools for web debugging and performance tracing?▼

Automate web debugging and performance tracing by using Chrome DevTools MCP to control browser navigation, inspect console messages, and record performance traces to identify bottlenecks and optimize Core Web Vitals.

Can I capture network inspection data and screenshots via browser automation?▼

Yes, browser automation via Chrome DevTools MCP enables you to capture screenshots and perform network inspection, analyzing network activity to extract structured data during automated workflows.

How do I run performance profiling and record traces on a target URL?▼

Run performance profiling by launching the Chrome DevTools agent to navigate to a target URL, then executing a performance trace to record and analyze runtime bottlenecks and Core Web Vitals.

Does this approach support viewport resizing and network condition emulation for responsive testing?▼

Yes, Chrome DevTools MCP supports emulation, allowing you to resize viewports and simulate network and CPU conditions to conduct responsive testing across various page contexts.

What's the best way to execute scripts in page context during browser automation?▼

Execute scripts in page context by leveraging Chrome DevTools MCP commands, which enable deterministic task execution, page context manipulation, and structured data extraction during automated interactions.

How do I handle form filling and dialog interactions automatically in a live browser?▼

Handle form filling and dialog interactions automatically by utilizing Chrome DevTools MCP to open pages, click elements, and manage dialogs, ensuring repeatable workflows and reducing manual debugging time.

Related Skills

Explore More Software Engineering Skills→
BorisserzBorisserz
1

browser-testing-with-devtools

Inspect DOM, console, network, and performance data via Chrome DevTools MCP.

Community
Intermediate
openeuler-mirroropeneuler-mirror
3

root-cause-localization

Correlate logs, trace spans, and dependency graphs to output structured JSON root cause reports.

Official
Advanced
open-gsdopen-gsd
38

gsd-browser

Automate Chrome/Chromium browser navigation and interaction via CDP.

Official
Advanced
afonsoftafonsoft
1

chrome-devtools

Automate browser control, debugging, and performance analysis via Chrome DevTools MCP.

Community
Advanced