chrome-devtoolsUses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions,...
Install via ClawdBot CLI:
clawdbot install podcasting101/chrome-devtoolsBrowser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: npx chrome-devtools-mcp@latest --help.
Page selection: Tools operate on the currently selected page. Use list_pages to see available pages, then select_page to switch context.
Element interaction: Use take_snapshot to get page structure with element uids. Each element has a unique uid for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
navigate_page or new_pagewait_for to ensure content is loaded if you know what you look for.take_snapshot to understand page structureuids from snapshot for click, fill, etc.filePath parameter for large outputs (screenshots, snapshots, traces)pageIdx, pageSize) and filtering (types) to minimize dataincludeSnapshot: false on input actions unless you need updated page statetake_snapshot (text-based, faster, better for automation)take_screenshot (when user needs to see visual state)evaluate_script for data not in accessibility treeYou can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
If chrome-devtools-mcp is insufficient, guide users to use Chrome DevTools UI:
If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.
Generated Mar 1, 2026
Developers use this skill to debug front-end issues in web applications by inspecting elements, network requests, and console logs. It helps identify and fix bugs like broken UI components or slow API responses, improving software quality and user experience.
QA engineers automate browser interactions to test web functionalities such as form submissions, button clicks, and page navigation. This ensures consistent testing across different scenarios, reducing manual effort and catching regressions early in the development cycle.
Performance analysts use this skill to analyze web page load times, resource usage, and rendering performance. By capturing traces and snapshots, they identify bottlenecks and optimize code for faster load speeds, enhancing SEO and user retention.
E-commerce teams automate checks on product pages, cart functionality, and checkout processes to ensure smooth user journeys. This helps detect issues like broken links or payment errors in real-time, minimizing downtime and lost sales.
Accessibility specialists inspect web pages for compliance with standards like WCAG by analyzing the accessibility tree and element structures. This ensures websites are usable by people with disabilities, meeting legal requirements and improving inclusivity.
Offer a cloud-based platform where developers can run automated debugging and testing sessions via this skill. Charge a subscription fee based on usage tiers, providing features like parallel execution and detailed analytics to streamline web development workflows.
Provide consulting services to businesses by using this skill to audit and optimize their websites for performance, accessibility, and functionality. Charge per project or hourly rates, helping clients improve site speed, reduce bugs, and enhance user experience.
Integrate this skill into existing testing frameworks (e.g., Selenium, Cypress) as a premium add-on for enhanced debugging capabilities. License the integration to enterprises, generating revenue through one-time purchases or annual maintenance fees.
💬 Integration Tip
Configure the MCP server with appropriate CLI arguments for Chrome profiles to ensure stable browser lifecycle management and avoid launch errors.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.