Can I monitor console errors in real-time?

Yes, the skill can capture all console output, including errors, warnings, and JavaScript exceptions, filtering them by severity to pinpoint issues quickly.

Does this work with Core Web Vitals?

Yes, it includes capabilities to retrieve performance metrics like LCP, FID, and CLS, along with general page load and resource timing data.

How does this skill help with distributed tracing?

It allows Claude to generate, set, and extract W3C Trace Context headers, enabling the correlation of browser-side actions with backend service logs in platforms like Jaeger or Honeycomb.

Which observability platforms are supported?

It supports any platform compatible with OpenTelemetry (OTLP/HTTP) or console exporters, including Grafana Tempo, Jaeger, Honeycomb, and Datadog.

What network details can Claude inspect?

Claude can track HTTP requests, monitor API call timings, identify failed status codes, and inspect detailed request/response headers and bodies.

Browser DevTools Observability

Name: Browser DevTools Observability
Author: serkan-ozal

byserkan-ozal

•

Analytics & Monitoring

Monitors and debugs web applications through distributed tracing, real-time console logs, and detailed network request analysis.

This skill provides deep visibility into web applications by integrating OpenTelemetry and browser-level monitoring directly into the AI's workflow. It enables developers to correlate frontend interactions with backend services using W3C Trace Context, capture JavaScript exceptions from the console, and analyze network performance metrics like Core Web Vitals. By providing a traceable and inspectable execution environment, it significantly accelerates the process of debugging complex distributed systems and identifying performance bottlenecks in a live browser.

Key Features

01Core Web Vitals and resource timing performance metrics

02Detailed HTTP request analysis including timing and failure identification

03Distributed tracing with OpenTelemetry and W3C Trace Context support

04Automated correlation between browser actions and backend trace IDs

0560 GitHub stars

06Real-time console log monitoring and JavaScript exception tracking

Use Cases

01Identifying intermittent frontend errors and JavaScript exceptions in a live environment

02Debugging request flows across microservices by correlating browser sessions with backend traces

03Analyzing web performance and Core Web Vitals to optimize user experience

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add serkan-ozal/browser-devtools-mcp observability

For use in Claude.ai and ChatGPT

Download Skill