How does this skill organize captured debugging data?

It creates timestamped session directories for each investigation, containing dedicated files for console errors, network logs, and performance traces for easy reference.

Can I use this skill specifically for API and network failures?

Yes, it includes a specific network capture workflow that filters for failed requests (4xx/5xx errors) and allows you to inspect full request and response bodies.

Which browsers are supported by the Browser Debug skill?

The skill supports all Chromium-based browsers, including Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi, and Dia, as they all utilize the Chrome DevTools Protocol.

Does it capture performance data automatically?

Performance tracing is an optional feature that can be enabled on-demand to identify page load bottlenecks without cluttering standard debugging sessions with large trace files.

Is there a way to exclude noisy logs like analytics?

Yes, the skill includes a configuration file where you can define filters to exclude specific URLs, such as tracking scripts or analytics, to keep your logs clean.

Browser Debugging Pro

Name: Browser Debugging Pro
Author: jpoutrin

byjpoutrin

•

브라우저 자동화

Automates the capture and analysis of browser console, network, and performance logs to streamline AI-led web application debugging.

Browser Debugging Pro is a specialized Claude Code skill designed for systematic web application troubleshooting across all Chromium-based browsers including Chrome, Edge, and Brave. By leveraging the Chrome DevTools MCP, it captures timestamped sessions of console errors, network request failures, and performance traces, providing Claude with the high-fidelity diagnostic data needed to resolve complex frontend issues. This skill organizes logs into structured directories, allowing for efficient root cause analysis of CORS errors, UI bottlenecks, and intermittent JavaScript bugs through an automated and reproducible workflow.

주요 기능

01Comprehensive network activity monitoring for XHR/Fetch requests and response bodies.

02On-demand performance tracing to identify rendering bottlenecks and resource lag.

03Cross-browser compatibility with any platform using the Chrome DevTools Protocol.

04Automated session-based log organization with timestamped directories and symlinks.

058 GitHub stars

06Granular console capture filtering for critical errors, warnings, and context logs.

사용 사례

01Diagnosing intermittent API failures and CORS issues in production or local environments.

02Profiling page load performance to optimize resource delivery and frontend speed.

03Identifying the root cause of JavaScript runtime errors and UI rendering glitches.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jpoutrin/product-forge browser-debug

For use in Claude.ai and ChatGPT

Download Skill