chrome-devtools
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.
- Installs
- 450
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://smithery.ai --skill chrome-devtools- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads chrome-devtools automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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 (useuidfrom 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.list_console_messages/get_console_message: Inspect the page's console output.evaluate_script: Run custom JavaScript in the page context.list_network_requests/get_network_request: Analyze network traffic and request details.
4. Emulation & Performance
resize_page: Change the viewport dimensions.emulate: Throttling CPU/Network or emulating geolocation.performance_start_trace: Start recording a performance profile.performance_stop_trace: Stop recording and save the trace.performance_analyze_insight: Get detailed analysis from recorded performance data.
Workflow Patterns
Pattern A: Identifying Elements (Snapshot-First)
Always prefer take_snapshot over take_screenshot 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
list_pagesandselect_pageif you are unsure which tab is currently active. - Snapshots: Take a new snapshot after any major navigation or DOM change, as
uidvalues may change. - Timeouts: Use reasonable timeouts for
wait_forto avoid hanging on slow-loading elements. - Screenshots: Use
take_screenshotsparingly for visual verification, but rely ontake_snapshotfor logic.
FAQ
What does the chrome-devtools skill do?
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.
How do I install chrome-devtools?
Run npx skills add https://smithery.ai --skill chrome-devtools in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chrome-devtools/ (personal) or .claude/skills/chrome-devtools/ (project).
Which AI agents can use chrome-devtools?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is chrome-devtools safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains chrome-devtools?
It is published by smithery.ai in smithery.ai. It has 450 recorded installs.
More from smithery.ai
smithery-ai-cli
smithery.ai
Find, connect, and use MCP tools and skills via the Smithery CLI. Use when the user searches for new tools or skills, wants to discover integrations, connect to an MCP, install a skill, or wants to interact with an external service (email, Slack, Discord, GitHub, Jira, Notion, databases, cloud APIs, monitoring, etc.).
frontend-design
smithery.ai
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
skill-creator
smithery.ai
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Gemini CLI's capabilities with specialized knowledge, workflows, or tool integrations.
ui-ux-pro-max
smithery.ai
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
smithery.ai
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
xlsx
smithery.ai
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.