Does it support monitoring API calls?

Absolutely. Claude can inspect request and response headers, status codes, and timing to identify failed, slow, or incorrect API calls.

Can Claude see visual layout errors?

Yes, the skill allows Claude to capture screenshots and HTML snapshots to analyze the visual and structural state of a page at any given moment.

What browser environment does this skill use?

This skill utilizes a Playwright-based MCP server to control and inspect a live browser instance, providing a traceable and controllable execution environment.

How does Claude access console logs?

Claude uses the o11y_get-console-messages tool to retrieve all logs, warnings, and errors directly from the browser's developer console.

Can Claude fix JavaScript state issues directly?

Claude can execute diagnostic JavaScript directly within the browser context to check variables, verify state, and propose fixes based on the real-time results.

Web Application Debugging

Name: Web Application Debugging
Author: serkan-ozal

byserkan-ozal

•

分析与监控

Identifies and resolves frontend issues by inspecting console logs, network traffic, and real-time browser execution states.

The Web Debugging skill empowers Claude to act as a specialized frontend engineer by providing deep visibility into live browser environments. Powered by a Playwright-backed MCP server, it allows for the granular inspection of JavaScript console logs, network request/response cycles, and DOM states. Whether you are troubleshooting failed API calls, diagnosing silent JavaScript exceptions, or verifying UI layout through screenshots and HTML snapshots, this skill transforms Claude into a proactive debugger capable of isolating and fixing complex web application errors in real-time.

主要功能

01Live JavaScript execution for in-browser diagnostics and state checking

02Comprehensive DOM and storage inspection including cookies and localStorage

03Visual troubleshooting via high-resolution state screenshots

0460 GitHub stars

05Real-time console log inspection and log level filtering

06Detailed network traffic analysis for API and resource requests

使用场景

01Isolating silent JavaScript exceptions that cause UI component failures or broken interactions.

02Troubleshooting failed API integrations or 404/500 network errors in the browser.

03Verifying application state and DOM structure during complex user workflows or page loads.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill