Does it support automated form filling?

Yes, the fill_form command allows for batch input into multiple elements simultaneously for rapid testing.

Can Claude see the page layout visually?

Claude can use take_screenshot(fullPage: true) to capture the visual state of the application for layout verification.

How can I check for network errors or failed API calls?

You can use list_network_requests() and filter by status or resource types like fetch and xhr to identify failed requests.

Can I use this for performance auditing?

Yes, it includes performance_start_trace and performance_analyze_insight to diagnose Core Web Vitals like LCP.

How does the skill identify elements for interaction?

The skill uses the take_snapshot() command to analyze the DOM and generate unique IDs (uids) for interactive elements before clicking or typing.

Webapp Debugger

Name: Webapp Debugger
Author: CAPHTECH

byCAPHTECH

0•

Browser Automation

Debugs web applications using Chrome DevTools to monitor console logs, analyze network traffic, and automate browser interactions.

The Webapp Debugger skill empowers Claude to interact directly with web applications via the Chrome DevTools MCP, facilitating deep debugging and automated testing. It allows Claude to capture page snapshots, identify UI elements via unique IDs, execute complex interactions like form filling, and inspect network requests or console errors in real-time. This skill is essential for developers looking to diagnose performance bottlenecks, verify front-end code changes, or perform automated E2E testing within their AI-assisted workflow.

Key Features

01Automated browser interaction and navigation using unique element IDs

02Deep network request analysis for XHR/Fetch troubleshooting

030 GitHub stars

04Visual verification through full-page screenshots and DOM snapshots

05Real-time console log monitoring for error tracking and warnings

06Performance tracing and LCP insight generation

Use Cases

01Verifying local code changes by navigating to localhost and testing UI flows

02Automating E2E testing scenarios to identify bugs in sign-up or checkout processes

03Diagnosing failed form submissions by analyzing network payloads and console errors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add caphtech/claude-marketplace webapp-debugger

For use in Claude.ai and ChatGPT

Key Features

01Automated browser interaction and navigation using unique element IDs

02Deep network request analysis for XHR/Fetch troubleshooting

030 GitHub stars

04Visual verification through full-page screenshots and DOM snapshots

05Real-time console log monitoring for error tracking and warnings

06Performance tracing and LCP insight generation

Use Cases

01Verifying local code changes by navigating to localhost and testing UI flows

02Automating E2E testing scenarios to identify bugs in sign-up or checkout processes

03Diagnosing failed form submissions by analyzing network payloads and console errors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add caphtech/claude-marketplace webapp-debugger

For use in Claude.ai and ChatGPT