Can I test mobile responsiveness with this skill?

Yes, the skill includes tools to resize the viewport and emulate different devices, allowing you to capture screenshots and verify layouts across mobile, tablet, and desktop resolutions.

Does this support headless mode?

Yes, you can configure the MCP to run in headless mode by adding the --headless flag during the 'claude mcp add' setup process.

Can I monitor API calls with this skill?

Yes, the skill provides tools to list and inspect network requests, allowing you to verify that API calls are being made correctly and check their status codes and response data.

How do I handle element interactions if the UI changes?

It is recommended to re-run the take_snapshot tool after any interaction that modifies the DOM to ensure you have the most up-to-date UIDs for subsequent commands.

What is the benefit of using snapshots over screenshots?

Snapshots provide the page's accessibility tree and unique element IDs (UIDs), which are necessary for Claude to interact with specific elements accurately, whereas screenshots are primarily for visual verification.

Chrome DevTools UI Tester

Name: Chrome DevTools UI Tester
Author: Michael0520

byMichael0520

0•

ブラウザ自動化

Automates browser interactions and UI testing using Chrome DevTools MCP to verify web interfaces, debug console errors, and capture screenshots.

This skill integrates Chrome DevTools with Claude Code, allowing developers to perform automated UI testing, accessibility snapshots, and browser-based debugging directly from the terminal. It provides a robust suite of tools for navigating pages, interacting with elements using unique IDs, analyzing network requests, and auditing performance. Whether you are verifying a new frontend feature, debugging responsive layouts, or monitoring console logs for runtime errors, this skill enables seamless browser automation and visual verification within your development workflow.

主な機能

01Comprehensive browser automation including navigation, clicking, and form filling

02Visual verification through full-page screenshots and DOM accessibility snapshots

03Responsive design testing via viewport resizing and device emulation

040 GitHub stars

05Real-time debugging with console message logging and network request inspection

06Performance auditing using built-in trace recording and Core Web Vitals analysis

ユースケース

01Verifying responsive layouts across mobile, tablet, and desktop breakpoints during development

02Automated end-to-end testing of user flows like login, registration, and checkout

03Debugging production UI issues by inspecting console errors and network state in a live browser

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add michael0520/milo-claudekit chrome-devtools-mcp

For use in Claude.ai and ChatGPT

Download Skill