How does this skill help with UI and accessibility bugs?

It utilizes ARIA snapshots to understand page structure from an accessibility perspective and generates annotated screenshots to visually map and identify specific DOM elements.

Can I use this for backend Node.js debugging?

Yes, by setting the environment to the Node platform, the skill adapts for backend environments, adding log retrieval capabilities while disabling frontend-specific tools like screenshots.

Can I inspect API payloads and headers?

Yes, the network analysis capability allows Claude to monitor HTTP requests, inspecting request/response headers, status codes, and timing to diagnose integration issues.

What are non-blocking tracepoints?

Tracepoints allow Claude to capture call stacks and local variable states at specific code locations without pausing the application's execution, making them ideal for debugging production-like environments.

Web Debugging & Observability

Name: Web Debugging & Observability
Author: serkan-ozal

byserkan-ozal

•

分析与监控

Inspects console logs, network traffic, and execution tracepoints to troubleshoot web application issues in real-time.

The Web Debugging skill empowers Claude to perform deep-dive technical investigations into web applications by accessing browser internals and diagnostic tools. It enables the identification of JavaScript errors, analysis of HTTP request/response cycles, and the use of advanced non-blocking tracepoints and logpoints to capture state without halting execution. Ideal for troubleshooting frontend bugs, performance bottlenecks, and API integration issues, this skill provides a structured workflow from initial reproduction to evidence-based documentation using ARIA snapshots and annotated visual capture.

主要功能

014 GitHub stars

02Non-blocking tracepoints and logpoints for code execution tracing

03Automated ARIA and annotated screenshots for visual debugging

04Diagnostic JavaScript execution via page evaluation

05Network request analysis with header and status code inspection

06Real-time console log and JavaScript exception monitoring

使用场景

01Identifying the root cause of failed API calls or slow network requests

02Troubleshooting layout issues and UI bugs using ARIA-annotated snapshots

03Debugging complex JavaScript state changes without pausing execution

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add serkan-ozal/browser-devtools-claude web-debugging

For use in Claude.ai and ChatGPT

Download Skill