Can I use this skill to debug network errors?

Yes, you can list all network requests, filter for failed status codes, and inspect request/response details to troubleshoot API integrations and resource loading.

Can I emulate mobile devices or slow networks?

Yes, the emulation tools allow you to resize the viewport, throttle CPU/network speeds, and even emulate specific geographic locations for testing.

How does the Chrome DevTools Agent identify web elements?

The skill uses a 'snapshot-first' approach, generating a text-based accessibility tree that assigns unique UIDs to elements, making interaction more reliable than traditional CSS selectors.

Does it support Core Web Vitals analysis?

Absolutely. The skill can record performance traces and use specific analysis tools to identify Largest Contentful Paint (LCP) issues and layout shifts.

Can Claude handle multiple open tabs with this skill?

Yes, it includes page management tools to list all open tabs, switch focus between them, and manage multiple browsing contexts simultaneously.

Chrome DevTools Agent

Name: Chrome DevTools Agent
Author: Tahir-yamin

byTahir-yamin

•

浏览器自动化

Automates, debugs, and analyzes web applications directly within a live Chrome browser instance using MCP.

The Chrome DevTools Agent is a specialized skill that empowers Claude to control and inspect a live Chrome browser environment via the Model Context Protocol (MCP). It provides a comprehensive toolkit for developers to navigate pages, interact with DOM elements using accessibility snapshots, and perform deep technical analysis. Whether you are debugging complex JavaScript errors, capturing visual screenshots for regression testing, or profiling performance traces to optimize Core Web Vitals, this skill bridges the gap between AI reasoning and real-time browser execution.

主要功能

01Automated performance profiling and bottleneck analysis

02Full browser navigation and multi-page context management

03Interactive element control using snapshot-based UIDs

04Device, network, and geolocation emulation

05Real-time console log and network traffic inspection

065 GitHub stars

使用场景

01Automated end-to-end testing and UI verification

02Identifying and fixing performance issues using trace-based insights

03Debugging production issues by inspecting live network requests and console errors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tahir-yamin/dev-engineering-playbook chrome-devtools

For use in Claude.ai and ChatGPT

Download Skill