skills.rest
rithm84
rithm84COMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automates browser debugging and interaction through Chrome DevTools MCP tools.

Updated Aug 19, 2026
Search Tags:#debugging#browser automation#web testing#mcp#chrome devtools#performance analysis#extension testing
One-click install
npx skills add https://github.com/rithm84/Manor --skill chrome-devtools-rithm84
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/rithm84/Manor/tree/main/.agents/skills/browser-related/chrome-devtools-mcp/chrome-devtools
Command: npx skills add https://github.com/rithm84/Manor --skill chrome-devtools-rithm84

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Debugging web pages, inspecting network requests, and automating browser interactions manually is slow and repetitive. This Skill gives an AI agent direct control of Chrome via the chrome-devtools-mcp server, enabling structured page inspection, interaction, and performance analysis. ## Core Features & Use Cases - Page Automation: Navigate pages, take snapshots of the accessibility tree, and interact with elements by uid (click, fill, select). - Debugging & Inspection: Capture screenshots, evaluate scripts, analyze performance traces, and inspect network requests. - Extension Testing: Install unpacked extensions, trigger extension actions, and verify service workers when the server runs with the --categoryExtensions flag. - Use Case: Ask the agent to open a local dev server page, snapshot the DOM, fill a login form, and capture a performance trace to diagnose a slow page load. ## Quick Start Use Chrome DevTools to open http://localhost:3000, take a snapshot, and click the login button.

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 with Chrome DevTools MCP?▼

Navigate to the page with navigate_page or new_page, wait for content with wait_for, then call take_snapshot to get element uids. Use those uids with click, fill, and other input tools to interact with the page.

How do I test a Chrome extension with chrome-devtools-mcp?▼

Start the MCP server with the --categoryExtensions flag, then use install_extension with the unpacked extension path. Trigger the action with trigger_extension_action and verify the service worker using evaluate_script with the serviceWorkerId.

What is the difference between take_snapshot and take_screenshot?▼

take_snapshot returns a text-based accessibility tree with element uids, which is faster and suited for automation. take_screenshot captures the visual state of the page, which is better when the user needs to see the rendered result.

Why is my element not found when clicking in Chrome DevTools MCP?▼

Element uids become stale when the page changes or elements are removed. Take a fresh snapshot with take_snapshot to get updated uids before retrying the interaction.

Does chrome-devtools-mcp support memory debugging?▼

Yes, memory tooling is available when the MCP server is started with the --memoryDebugging flag. Extension tooling similarly requires the --categoryExtensions flag at server startup.

Related Skills

Explore More Software Engineering Skills→
ajilantonyajilantony

chrome-devtools

Automate browser interactions and inspections via the Chrome DevTools Protocol.

Community
Advanced
santanapolsantanapol

browser-testing-with-devtools

Inspect live browser DOM, console logs, and network traffic via Chrome DevTools MCP.

Community
Intermediate
hardisgroupcomhardisgroupcom
368

test

Build, lint, and test code changes with yarn commands.

Official
Intermediate
droppiidroppii

ck:chrome-devtools

Automate browser tasks with Puppeteer scripts and persistent sessions.

Official
Advanced