skills.rest
jmolz
jmolzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-devtools

Automate and debug web pages via the Chrome DevTools MCP protocol.

Updated Apr 3, 2026
Search Tags:#debugging#web development#browser automation#Chrome DevTools#performance analysis
One-click install
npx skills add https://github.com/jmolz/m0lz.02 --skill chrome-devtools-jmolz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/jmolz/m0lz.02/tree/main/.agents/skills/chrome-devtools
Command: npx skills add https://github.com/jmolz/m0lz.02 --skill chrome-devtools-jmolz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the challenge of expert-level browser automation, debugging, and performance analysis, enabling efficient interaction with web pages, visual inspection, debugging, and profiling.

Core Features & Use Cases

  • Browser Automation: Navigate, interact, and fill forms in web pages.
  • Visual Inspection: Capture screenshots and text snapshots for detailed page inspection.
  • Debugging: Inspect console messages, evaluate JavaScript, and analyze network traffic.
  • Performance Analysis: Record and analyze performance traces to identify bottlenecks.
  • Emulation: Resize viewports and emulate network/CPU conditions.

Quick Start

Start by using the chrome-devtools skill to navigate to a URL: chrome-devtools navigate_page "https://www.example.com".

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate web development tasks like navigating and filling forms in a Chrome browser?▼

Browser automation for navigating and filling forms is achieved by interacting with web pages through the Chrome DevTools protocol. You can programmatically drive page interactions and capture text snapshots for inspection without manual input.

What's the best way to analyze network traffic and debug console messages on a live web page?▼

Analyzing network traffic and debugging console messages requires capturing live page data via Chrome DevTools. The skill inspects network requests and evaluates JavaScript directly to identify communication bottlenecks and runtime errors.

How does performance profiling work to identify bottlenecks during web page interactions?▼

Performance profiling records runtime traces of web page interactions to identify bottlenecks. By analyzing these traces through Chrome DevTools, you can measure execution times and pinpoint specific scripts causing delays.

Can I emulate different network conditions and CPU throttling to test web page performance?▼

Emulating network conditions and CPU throttling is supported to test web page performance under constrained environments. The skill resizes viewports and simulates varying network speeds to evaluate responsive design behavior.

Do I need a running Chrome browser to use Chrome DevTools protocol support for debugging?▼

A running Chrome browser is required to use Chrome DevTools protocol support for debugging. The skill connects to an active browser instance to evaluate JavaScript, capture screenshots, and inspect network traffic.

Related Skills

Explore More Software Engineering Skills→
badlogicbadlogic
2.3k

browser-tools

Automate Chrome browser control and content extraction via the Chrome DevTools Protocol.

Community
Advanced
OpenGGFOpenGGF
6

s1-trace-replay

Compare Sonic 1 engine traces against recorded reference data to identify physics divergences.

Official
Advanced
xpert-aixpert-ai
8

playwright-cli

Automate browser interactions for web testing, form filling, screenshots, and data extraction.

Official
Intermediate
proffesor-for-testingproffesor-for-testing
436

compatibility-testing

Validate web application compatibility across browsers and devices with Playwright and BrowserStack.

Community
Advanced