skills.rest
sadie100
sadie100COMMUNITY
Explore all skills by this author →
GitHub

mobile-view-debugger

Automate mobile web UI debugging with Chrome DevTools and Python scripts.

Updated Apr 8, 2026
Search Tags:#web development#automated testing#Chrome DevTools#mobile UI#UI debugging
One-click install
npx skills add https://github.com/sadie100/claude-dotfiles --skill mobile-view-debugger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-view-debugger
Source: https://github.com/sadie100/claude-dotfiles/tree/main/skills/mobile-view-debugger
Command: npx skills add https://github.com/sadie100/claude-dotfiles --skill mobile-view-debugger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools, selenium, pypdf2, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of identifying and diagnosing UI issues in mobile web views, saving time and effort in manual debugging.

Core Features & Use Cases

  • Automated UI Diagnostics: Detects common mobile UI issues like layout breaks, text overflow, and touch target size problems.
  • Emulated Device Testing: Simulates various mobile devices for comprehensive testing.
  • Screenshot Capture: Captures screenshots of the web page at different scroll positions for thorough analysis.
  • Customizable Reports: Generates detailed reports highlighting issues and their severity.
  • Use Case: When encountering UI issues on mobile devices, this Skill can automatically diagnose and report problems, allowing for quick resolution.

Quick Start

Use the mobile-view-debugger skill to debug the UI of the webpage at 'https://example.com' on an iPhone 14.

Frequently Asked Questions about mobile-view-debugger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate mobile UI debugging to detect layout issues and text overflow?▼

Automated mobile UI debugging identifies layout breaks, text overflow, and touch target problems using Chrome DevTools. It simulates various mobile devices, captures screenshots at different scroll positions, and generates customizable reports detailing issues and their severity.

Can I use Chrome DevTools and Selenium to simulate specific mobile devices for web testing?▼

Yes, Chrome DevTools and Selenium simulate specific mobile devices for web testing. You can test web pages on emulated devices like an iPhone 14, allowing comprehensive automated testing of mobile viewports and UI responsiveness without physical hardware.

What is the best way to automatically diagnose touch target size problems in a mobile web view?▼

The best way to diagnose touch target size problems is automated testing via Chrome DevTools. It inspects mobile web views to detect common UI issues, capturing screenshots and generating detailed reports that highlight touch target violations and their severity.

Do I need Python scripts to run automated testing and reporting for mobile UI issues?▼

Yes, Python scripts are required to run automated testing and reporting for mobile UI issues. The debugging process relies on Python scripts alongside the Chrome DevTools API to automate diagnostics, simulate devices, capture screenshots, and generate issue reports.

How do I capture screenshots of a web page at different scroll positions for mobile UI analysis?▼

To capture screenshots at different scroll positions for mobile UI analysis, use automated Chrome DevTools testing scripts. These scripts scroll through the web page, capture screenshots at various intervals, and compile them into a report for thorough layout analysis.

What common mobile UI problems can be identified using automated Chrome DevTools testing?▼

Automated Chrome DevTools testing identifies common mobile UI problems like layout breaks, text overflow, and insufficient touch target sizes. It simulates mobile devices to detect these issues and generates customizable reports highlighting the problems and their severity.

Related Skills

Explore More Software Engineering Skills→
reez455Greez455G

browser-testing-with-devtools

Automate real-time browser testing and UI verification via Chrome DevTools.

Community
Advanced
opendatahub-ioopendatahub-io

pipeline-grouping

Group and deduplicate CI/CD pipeline failures using error files and Jira tickets.

Official
Intermediate
afonsoftafonsoft
1

chrome-devtools

Automate browser control, debugging, and performance analysis via Chrome DevTools MCP.

Community
Advanced
dev-giosdev-gios
1

qa-visual

Capture screenshots and analyze rendered elements for design system compliance.

Community
Advanced