skills.rest
forgivesam168
forgivesam168COMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate browser control and debugging workflows via Chrome DevTools MCP commands.

2|1|Updated Feb 5, 2026
Search Tags:#debugging#screenshots#devtools#browser-automation#network-analysis#performance-tracing
One-click install
npx skills add https://github.com/forgivesam168/ai-dev-workflow --skill chrome-devtools-forgivesam168
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/forgivesam168/ai-dev-workflow/tree/main/skills/chrome-devtools
Command: npx skills add https://github.com/forgivesam168/ai-dev-workflow --skill chrome-devtools-forgivesam168

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables automated browser control, debugging, and performance analysis using Chrome DevTools MCP, empowering you to automate browser tasks, capture screenshots, inspect network traffic, and profile performance.

Core Features & Use Cases

  • Navigation & page management: new_page, navigate_page, select_page, list_pages, close_page, wait_for
  • Input & interaction: click, fill, fill_form, hover, press_key, drag, handle_dialog, upload_file
  • Debugging & inspection: take_snapshot, take_screenshot, list_console_messages, get_console_message, evaluate_script, list_network_requests, get_network_request
  • Emulation & performance: resize_page, emulate, performance_start_trace, performance_stop_trace, performance_analyze_insight
  • Use Case: Automate QA checks, collect screenshots for visual regressions, profile performance on pages to optimize Core Web Vitals.

Quick Start

Use this skill to open a page (e.g., https://example.com), take a snapshot, and capture a screenshot for verification.

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 debugging and capture screenshots for visual regression checks?▼

Automate browser debugging by using Chrome DevTools MCP to navigate pages, execute scripts, and capture screenshots for visual regression checks. It provides structured commands to interact with web elements, take snapshots, and verify page states without manual intervention.

Can I inspect network traffic and profile performance for Core Web Vitals using browser automation?▼

Yes, you can inspect network traffic and profile performance for Core Web Vitals using browser automation. The skill lists network requests, retrieves detailed request data, and runs performance traces to analyze insights, helping you optimize page load metrics.

What is the best way to handle browser interactions like clicking, filling forms, and uploading files programmatically?▼

The best way to handle browser interactions programmatically is by using DevTools MCP input commands. It supports clicking, filling forms, hovering, pressing keys, dragging, handling dialogs, and uploading files to automate complex user workflows across web applications.

Does this browser automation tool support page emulation and resizing for responsive testing?▼

Yes, this browser automation tool supports page emulation and resizing for responsive testing. You can resize pages and apply device emulation to verify how web applications render and behave across different screen sizes and environments.

How do I extract console messages and evaluate scripts during automated web app testing?▼

Extract console messages and evaluate scripts during automated web app testing by leveraging DevTools MCP inspection commands. It lists all console messages, retrieves specific message details, and executes custom JavaScript to inspect and manipulate page behavior.

Are there limitations when using Chrome DevTools MCP for complex drag and drop interactions?▼

While Chrome DevTools MCP supports drag operations for browser automation, complex drag and drop interactions may require precise coordinate mapping using evaluate_script. Limitations depend on the target application's rendering logic and event handling implementation.

Related Skills

Explore More Software Engineering Skills→
sanand0sanand0
11

devtools

Control Chrome via DevTools Protocol for browser testing and debugging.

Community
Advanced
anolilabanolilab
214

web-perf

Analyze Core Web Vitals and network audits to diagnose performance issues.

Official
Advanced
wildbitcawildbitca
1

playwright

Automate Playwright end-to-end testing workflows with page objects and selectors.

Official
Advanced
paidethonpaidethon

use-my-browser

Interact with a live browser session via Chrome DevTools Protocol.

Community
Advanced