Mmcp.market

chrome-devtools skill

by github·github/awesome-copilot·39k stars·MIT

Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.

A100/100content scan

Is the chrome-devtools skill safe?

Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-09-28.

No findings.

Install the chrome-devtools skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/github/awesome-copilot.git /tmp/awesome-copilot
mkdir -p ~/.claude/skills
cp -r /tmp/awesome-copilot/skills/chrome-devtools ~/.claude/skills/chrome-devtools
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Chrome DevTools Agent

Overview

A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the chrome-devtools MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.

When to Use

Use this skill when:

  • Browser Automation: Navigating pages, clicking elements, filling forms, and handling dialogs.
  • Visual Inspection: Taking screenshots or text snapshots of web pages.
  • Debugging: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.
  • Performance Analysis: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.
  • Emulation: Resizing the viewport or emulating network/CPU conditions.

Tool Categories

1. Navigation & Page Management

  • new_page: Open a new tab/page.
  • navigate_page: Go to a specific URL, reload, or navigate history.
  • select_page: Switch context between open pages.
  • list_pages: See all open pages and their IDs.
  • close_page: Close a specific page.
  • wait_for: Wait for specific text to appear on the page.

2. Input & Interaction

  • click: Click on an element (use uid from snapshot).
  • fill / fill_form: Type text into inputs or fill multiple fields at once.
  • hover: Move the mouse over an element.
  • press_key: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C").
  • drag: Drag and drop elements.
  • handle_dialog: Accept or dismiss browser alerts/prompts.
  • upload_file: Upload a file through a file input.

3. Debugging & Inspection

  • take_snapshot: Get a text-based accessibility tree (best for identifying elements).
  • take_screenshot: Capture a visual representation of the page or a specific element.
  • listconsolemessages / getconsolemessage: Inspect the page's console output.
  • evaluate_script: Run custom JavaScript in the page context.
  • listnetworkrequests / getnetworkrequest: Analyze network traffic and request details.

4. Emulation & Performance

  • resize_page: Change the viewport dimensions.
  • emulate: Throttling CPU/Network or emulating geolocation.
  • performancestarttrace: Start recording a performance profile.
  • performancestoptrace: Stop recording and save the trace.
  • performanceanalyzeinsight: Get detailed analysis from recorded performance data.

Workflow Patterns

Pattern A: Identifying Elements (Snapshot-First)

Always prefer takesnapshot over takescreenshot for finding elements. The snapshot provides uid values which are required by interaction tools.

1. `take_snapshot` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.

Pattern B: Troubleshooting Errors

When a page is failing, check both console logs and network requests.

1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.

Pattern C: Performance Profiling

Identify why a page is slow.

1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.

Best Practices

  • Context Awareness: Always run listpages and selectpage if you are unsure which tab is currently active.
  • Snapshots: Take a new snapshot after any major navigation or DOM change, as uid values may change.
  • Timeouts: Use reasonable timeouts for wait_for to avoid hanging on slow-loading elements.
  • Screenshots: Use takescreenshot sparingly for visual verification, but rely on takesnapshot for logic.

More skills from github/awesome-copilot

  • Aacquire-codebase-knowledgeUse this skill when the user explicitly asks to map, document, or onboard into an existing codebase. Trigger for prompts like "map this codebase", "document this architecture", "onboard me to this repo", or "create codebase docs". Do not trigger for routine feature implementation, bug fixes, or narrow code edits unless the user asks for repository-level discovery.
  • Aacreadiness-assessRun the AgentRC readiness assessment on the current repository and produce a static HTML dashboard at reports/index.html. Wraps `npx github:microsoft/agentrc readiness` and hands off rendering to the @ai-readiness-reporter custom agent. Supports policies (--policy) for org-specific scoring. Use when asked to assess, audit, or score the AI readiness of a repo.
  • Aacreadiness-generate-instructionsGenerate tailored AI agent instruction files via AgentRC instructions command. Produces .github/copilot-instructions.md (default, recommended for Copilot in VS Code) plus optional per-area .instructions.md files with applyTo globs for monorepos. Use after running /acreadiness-assess to close gaps in the AI Tooling pillar.
  • Aacreadiness-policyHelp the user pick, write, or apply an AgentRC policy. Policies customise readiness scoring by disabling irrelevant checks, overriding impact/level, setting pass-rate thresholds, or chaining org baselines with team overrides. Use when the user asks about strict mode, AI-only scoring, custom weights, CI gating, or wants org-wide standardisation.
  • Aad-campaign-analyzerUse this skill when the user shares ad campaign performance data and asks what to cut, scale, or test. Trigger for prompts like "analyze my ad campaigns", "where am I wasting ad spend", "reallocate my ad budget", "which ads are actually working", or "ROAS analysis". Do not trigger for campaign planning or creative generation without performance data.
  • Aadd-educational-commentsAdd educational comments to the file specified, or prompt asking for file to comment if one is not provided.
  • Aadobe-illustrator-scriptingWrite, debug, and optimize Adobe Illustrator automation scripts using ExtendScript (JavaScript/JSX). Use when creating or modifying scripts that manipulate documents, layers, paths, text frames, colors, symbols, artboards, or any Illustrator DOM objects. Covers the complete JavaScript object model, coordinate system, measurement units, export workflows, and scripting best practices.
  • Aagent-architectureDesign AI agent architectures through requirements discovery, or audit and diagnose architectural flaws in existing agents. Architecture only; excludes implementation and general code review.
  • Aagent-governancePatterns and techniques for adding governance, safety, and trust controls to AI agent systems. Use this skill when: - Building AI agents that call external tools (APIs, databases, file systems) - Implementing policy-based access controls for agent tool usage - Adding semantic intent classification to detect dangerous prompts - Creating trust scoring systems for multi-agent workflows - Building audit trails for agent actions and decisions - Enforcing rate limits, content filters, or tool restrictions on agents - Working with any agent framework (PydanticAI, CrewAI, OpenAI Agents, LangChain, AutoGen)
  • Aagent-owasp-complianceCheck any AI agent codebase against the OWASP Agentic Security Initiative (ASI) Top 10 risks. Use this skill when: - Evaluating an agent system's security posture before production deployment - Running a compliance check against OWASP ASI 2026 standards - Mapping existing security controls to the 10 agentic risks - Generating a compliance report for security review or audit - Comparing agent framework security features against the standard - Any request like "is my agent OWASP compliant?", "check ASI compliance", or "agentic security audit"
  • Aagent-skill-stackFind, evaluate, and assemble the smallest compatible set of AI Agent Skills for an end-to-end natural-language goal. Use when a user wants Skills for a multi-step workflow, asks which Skills fit a project, needs an installed-Skill audit or conflict check, has low Skill recall, wants indirect helpers such as humanizers or compliance checks, or wants a project-specific Skill Stack with controlled installation. Search local Skills, registries, GitHub, and OpenCLI; compare adoption, verified fit, safety, and overlap. Do not use for locating one known or common Skill; use the generic find-skills workflow.
  • Aagent-supply-chainVerify supply chain integrity for AI agent plugins, tools, and dependencies. Use this skill when: - Generating SHA-256 integrity manifests for agent plugins or tool packages - Verifying that installed plugins match their published manifests - Detecting tampered, modified, or untracked files in agent tool directories - Auditing dependency pinning and version policies for agent components - Building provenance chains for agent plugin promotion (dev → staging → production) - Any request like "verify plugin integrity", "generate manifest", "check supply chain", or "sign this plugin"

All agent skills → · MCP servers