Can Claude see JavaScript errors with this skill?

Yes, it can capture and filter all console messages, including errors and warnings, to provide context for debugging application crashes.

How does this skill help with backend debugging?

It injects W3C Trace Context headers into browser requests, allowing Claude to correlate frontend actions with backend logs in platforms like Jaeger or Datadog.

What performance metrics does it provide?

It tracks Core Web Vitals, page load timings, resource timing, and user interaction metrics to help identify performance regressions.

Which observability platforms are supported?

The skill supports any OTLP-compatible exporter, including Jaeger, Grafana Tempo, Honeycomb, and Datadog via environment configuration.

Observability & Tracing

Name: Observability & Tracing
Author: serkan-ozal

byserkan-ozal

•

Analíticas y Monitorización

Monitor, debug, and correlate frontend and backend request flows using OpenTelemetry and browser-native diagnostics.

The Observability skill empowers Claude to perform deep technical debugging of web applications by integrating OpenTelemetry with browser dev tools to capture logs, network requests, and performance metrics. It bridges the gap between client-side actions and server-side responses, allowing developers to generate and track W3C Trace Context across service boundaries to identify bottlenecks and failures in complex distributed architectures.

Características Principales

01Distributed tracing with W3C Trace Context (traceparent) support

02Comprehensive network request tracking and API timing analysis

034 GitHub stars

04Native integration with OTLP collectors like Jaeger and Grafana Tempo

05Real-time console log capture with level-based filtering

06Performance monitoring via Core Web Vitals and resource load times

Casos de Uso

01Optimizing application performance by analyzing Core Web Vitals and resource timing

02Correlating a frontend user action with specific backend microservice logs

03Debugging complex request flows and identifying failed API calls in real-time

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill