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

ブラウザ自動化

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.

主な機能

Comprehensive browser automation including navigation, clicking, and form filling
Visual verification through full-page screenshots and DOM accessibility snapshots
Responsive design testing via viewport resizing and device emulation
0 GitHub stars
Real-time debugging with console message logging and network request inspection
Performance auditing using built-in trace recording and Core Web Vitals analysis

ユースケース

Verifying responsive layouts across mobile, tablet, and desktop breakpoints during development
Automated end-to-end testing of user flows like login, registration, and checkout
Debugging production UI issues by inspecting console errors and network state in a live browser

概要

主な機能

Comprehensive browser automation including navigation, clicking, and form filling
Visual verification through full-page screenshots and DOM accessibility snapshots
Responsive design testing via viewport resizing and device emulation
0 GitHub stars
Real-time debugging with console message logging and network request inspection
Performance auditing using built-in trace recording and Core Web Vitals analysis

ユースケース

Verifying responsive layouts across mobile, tablet, and desktop breakpoints during development
Automated end-to-end testing of user flows like login, registration, and checkout
Debugging production UI issues by inspecting console errors and network state in a live browser