chrome-devtools

Automate browser navigation, element interaction, and performance trace capture via Chrome DevTools MCP.

Updated Feb 16, 2026

Search Tags:#automation #performance #debugging #web scraping #devtools #browser

Ready to run

npx skills add https://github.com/Thedougler/agent-template --skill chrome-devtools-thedougler

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/Thedougler/agent-template/tree/main/.github/skills/chrome-devtools
Command: npx skills add https://github.com/Thedougler/agent-template --skill chrome-devtools-thedougler

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides expert-level control over a live Chrome browser, enabling automation, debugging, and performance analysis directly within your workflow.

Core Features & Use Cases

Browser Automation: Navigate pages, interact with elements, and fill forms.
Debugging & Inspection: Analyze console logs, network requests, and page structure.
Performance Analysis: Profile page load times and identify bottlenecks.
Use Case: Automatically fill out a web form, take a screenshot of the result, and then analyze the page's loading performance.

Quick Start

Use the chrome-devtools skill to navigate to 'https://www.example.com' and then take a screenshot.

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 inspect network requests for web scraping?▼

Automate browser interactions and inspect network requests using Chrome DevTools MCP. You can navigate pages, interact with elements, and monitor network traffic directly within your workflow for web scraping or automated testing.

What is the best way to profile page load times and identify performance bottlenecks in a web application?▼

Profile page load times and identify performance bottlenecks by capturing performance traces with Chrome DevTools. This Skill provides direct control over browser navigation and performance trace capture to analyze your web application's loading behavior.

Can I debug web applications by analyzing console logs and page structure automatically?▼

Debug web applications by analyzing console logs and page structure automatically. This Skill enables expert-level inspection of live Chrome browsers, allowing you to evaluate console output and DOM elements directly in your workflow.

Does browser automation with Chrome DevTools require any external dependencies?▼

Browser automation with Chrome DevTools requires no external dependencies. It operates independently using scripts and references to control live Chrome browser navigation, element interaction, and network monitoring.

How do I fill out a web form and take a screenshot of the result automatically?▼

Fill out a web form and take a screenshot automatically by using this Skill to navigate to the target URL, interact with form elements, and capture the page state. It applies direct browser control to automate these sequential actions.