skills.rest
Thedougler
ThedouglerCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Thedougler/agent-template --skill chrome-devtools-thedougler
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
rafaelcallejarafaelcalleja
2

gemini-cli

Interact with Gemini AI models through a command-line interface.

Community
Intermediate
FeedbackFriendsFeedbackFriends
1

playwright-cli

Automate browser navigation, form filling, screenshots, and network monitoring.

Official
Intermediate
Awannaphasch2016Awannaphasch2016

webapp-testing

Automate local web application testing with Playwright Python scripts.

Community
Intermediate
hathbangerhathbanger

agent-browser

Automate web navigation and interaction via a headless browser CLI.

Community
Intermediate