🎯

observability

🎯Skill

from serkan-ozal/browser-devtools-skills

What it does

Enables comprehensive web application monitoring by tracking distributed traces, console logs, network requests, and performance metrics across frontend and backend services.

📦

Part of

serkan-ozal/browser-devtools-skills(9 items)

observability

Installation

Quick InstallInstall with npx

npx skills add serkan-ozal/browser-devtools-skills

npm installInstall npm package

npm install -g browser-devtools-mcp

📖 Extracted from docs: serkan-ozal/browser-devtools-skills

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Monitor and debug web applications using OpenTelemetry, console logs, network requests, and distributed tracing. Use when the user asks about distributed tracing, correlating frontend/backend requests, OpenTelemetry, Jaeger, or monitoring application behavior.

Overview

# Observability Skill

Monitor and debug web applications using OpenTelemetry, console logs, network requests, and distributed tracing.

When to Use

This skill activates when:

User asks about distributed tracing
User wants to correlate frontend and backend requests
User mentions OpenTelemetry, Jaeger, Zipkin, or tracing
User needs to debug request flow across services
User wants to monitor application behavior

Capabilities

Distributed Tracing

```bash

browser-devtools-cli o11y get-trace-id

browser-devtools-cli o11y new-trace-id

browser-devtools-cli o11y set-trace-id --trace-id "abc123def456..."

```

Console Monitoring

```bash

browser-devtools-cli o11y get-console-messages

browser-devtools-cli --json o11y get-console-messages --types error,warn

browser-devtools-cli --json o11y get-console-messages --search "error"

```

Network Observability

```bash

browser-devtools-cli --json o11y get-http-requests

browser-devtools-cli --json o11y get-http-requests --resource-type fetch,xhr

browser-devtools-cli --json o11y get-http-requests --status-min 400

```

Performance Metrics

```bash

browser-devtools-cli --json o11y get-web-vitals

browser-devtools-cli --json o11y get-web-vitals --wait-ms 3000

browser-devtools-cli --json o11y get-web-vitals --include-debug

```

OpenTelemetry Integration

Trace Context

Browser DevTools MCP can inject and extract W3C Trace Context headers:

traceparent: Contains trace-id, span-id, and trace flags
tracestate: Vendor-specific trace information

Correlation Flow

```

Browser Session

│

├─► trace-id: abc123

│

▼

Frontend Request

│

├─► Header: traceparent: 00-abc123-def456-01

│

▼

Backend Service

│

├─► Logs with trace-id: abc123

│

▼

Observability Platform

│

└─► Full trace visualization

```

Debugging Workflow

```bash

SESSION="--session-id trace-session"

# 1. Generate new trace ID

browser-devtools-cli $SESSION o11y new-trace-id

# 2. Navigate (requests will carry trace ID)

browser-devtools-cli $SESSION navigation go-to --url "https://app.example.com"

browser-devtools-cli $SESSION sync wait-for-network-idle

# 3. Perform actions

browser-devtools-cli $SESSION interaction click --selector "#submit"

browser-devtools-cli $SESSION sync wait-for-network-idle

# 4. Get trace ID for backend correlation

browser-devtools-cli $SESSION o11y get-trace-id

# 5. Check console errors

browser-devtools-cli $SESSION --json o11y get-console-messages --types error

# 6. Check network requests

browser-devtools-cli $SESSION --json o11y get-http-requests

# 7. Cleanup

browser-devtools-cli session delete trace-session

```

Use Existing Trace ID

```bash

SESSION="--session-id trace-session"

# Set trace ID from backend

browser-devtools-cli $SESSION o11y set-trace-id --trace-id "abc123def456789..."

# Navigate (requests will use this trace ID)

browser-devtools-cli $SESSION navigation go-to --url "https://app.example.com"

# All subsequent requests carry the trace ID

browser-devtools-cli $SESSION interaction click --selector "#api-call"

```

Configuration

Environment Variables

| Variable | Description | Default |

|----------|-------------|---------|

| OTEL_ENABLE | Enable OpenTelemetry | false |

| OTEL_SERVICE_NAME | Service identifier | frontend |

| OTEL_EXPORTER_TYPE | Export destination | none |

| OTEL_EXPORTER_HTTP_URL | Collector endpoint | - |

| OTEL_EXPORTER_HTTP_HEADERS | Auth headers | - |

Exporter Types

| Type | Description |

|------|-------------|

| none | Disabled |

| console | Log to console |

| otlp/http | Send to OTLP collector |

Common Platforms

Jaeger

```bash

OTEL_EXPORTER_HTTP_URL=http://localhost:4318

```

Grafana Tempo

```bash

OTEL_EXPORTER_HTTP_URL=http://tempo:4318

```

Honeycomb

```bash

OTEL_EXPORTER_HTTP_URL=https://api.honeycomb.io

OTEL_EXPORTER_HTTP_HEADERS=x-honeycomb-team=YOUR_API_KEY

```

Datadog

```bash

OTEL_EXPORTER_HTTP_URL=http://localhost:4318

```

Best Practices

Generate new trace IDs for each test scenario
Document trace IDs in bug reports
Check console first for JavaScript errors
Filter network requests to relevant endpoints
Correlate timestamps between frontend and backend
Use structured logging with trace context
Set up OTEL exporter for full trace visibility

More from this repository8

🎯

browser-devtools-cli🎯Skill

Automates web browser interactions using Playwright for testing, debugging, and extracting content via a powerful CLI tool.

🎯

debugging🎯Skill

Debugs web web applications by inspconsoleecting messages,, tracing function and calls exceptions without breakingpoints. Human

🎯

browser-testing🎯Skill

Automates browser testing by navigating, interacting with web pages, filling forms, capturing content, and verifying UI behaviors using Browser DevTools CLI.

🎯

visual-testing🎯Skill

Validates and compares web page visual rendering across different browsers and configurations using automated screenshot comparison techniques.

🎯

react-debugging🎯Skill

Inspects and maps React components to DOM elements, helping developers quickly diagnose rendering issues and component interactions.

🎯

performance-audit🎯Skill

Performs comprehensive web page performance analysis using Web Vitals, network metrics, and SEO performance indicators.

🎯

accessibility-audit🎯Skill

Performs comprehensive web accessibility audits using ARIA snapshots, AX tree analysis, and WCAG validation checks.

🎯

api-testing🎯Skill

Mocks and tests API integrations by simulating responses, intercepting requests, and monitoring network traffic.