skills.rest
louisburroughs
louisburroughsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-devtools

Automate browser interactions and debugging via the Chrome DevTools MCP server.

Updated Dec 14, 2025
Search Tags:#automation#screenshots#Chrome DevTools#web debugging#network-analysis#performance-profiling
One-click install
npx skills add https://github.com/louisburroughs/durion --skill chrome-devtools-louisburroughs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/louisburroughs/durion/tree/main/.github/skills/chrome-devtools
Command: npx skills add https://github.com/louisburroughs/durion --skill chrome-devtools-louisburroughs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates browser interactions and debugging tasks using the Chrome DevTools MCP server to control a live Chromium-based browser.

Core Features & Use Cases

  • Navigation & Interaction: Open pages, click elements, fill forms, and inspect console output.
  • Debugging & Networking: Monitor console messages, analyze network requests, and diagnose issues.
  • Performance Profiling: Record and analyze performance traces to identify bottlenecks and layout shifts.
  • Use Case: Automate a user flow across a single-page app and validate network integrity with traces.

Quick Start

Connect to the Chrome DevTools MCP server, open a new page, navigate to a target URL, and take a screenshot as a quick 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 tasks and inspect network requests for web debugging?▼

Automating browser tasks and web debugging involves using the Chrome DevTools MCP server to control a live Chromium-based browser, enabling navigation, element interaction, console inspection, network analysis, and performance profiling across web pages.

Can I record performance traces to identify bottlenecks and layout shifts?▼

Yes, you can record performance traces to identify bottlenecks and layout shifts. The skill automates performance profiling across web pages to diagnose rendering issues and validate network integrity during automated user flows.

Does this approach work for single-page app QA and automation workflows?▼

Yes, this approach works for single-page app QA and automation workflows. It automates user flows across web pages by opening pages, clicking elements, filling forms, and taking screenshots for verification.

How do I take a screenshot after navigating to a target URL?▼

To take a screenshot, connect to the Chrome DevTools MCP server, open a new page, navigate to the target URL, and capture the screenshot as a quick verification of the automated browser interaction.

What do I need to run deterministic browser automation and capture artifacts?▼

You need a Chrome DevTools MCP server and a compatible runtime with browser access to run deterministic browser automation and capture artifacts like screenshots and performance traces.

Can I monitor console messages and diagnose issues during automated navigation?▼

Yes, you can monitor console messages and diagnose issues during automated navigation. The skill inspects console output and analyzes network requests to debug web pages effectively.

Related Skills

Explore More Software Engineering Skills→
mymx2mymx2
4

browser-testing-with-devtools

Inspect DOM, network traffic, and screenshots via Chrome DevTools MCP.

Community
Advanced
ToanPV90ToanPV90

web-perf

Diagnoses web page performance issues via Core Web Vitals and Chrome DevTools tracing.

Community
Intermediate
linenoizelinenoize
1

browser-pilot

Automate browser navigation and UI verification with Playwright MCP tools.

Community
Advanced
thechrickenrun-cyberthechrickenrun-cyber

webapp-testing

Test local web applications with Playwright automation in headless Chromium.

Community
Intermediate