메뉴
Monitor and debug web and Node.js 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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Test API integrations by mocking responses, intercepting requests, and monitoring network traffic. Use when the user wants to mock backend APIs, simulate errors, test offline behavior, intercept requests, or add authentication headers.
Automates browser interactions using Playwright for web testing, debugging, and automation. Use when the user needs to navigate websites, take screenshots, fill forms, click elements, extract page content (HTML/text), audit accessibility (ARIA/AX tree), measure Web Vitals performance, monitor console logs and HTTP requests, mock API responses, execute JavaScript in browser, inspect React components, compare UI with Figma designs, or perform non-blocking debugging with tracepoints, logpoints, and exception monitoring.
Automated browser testing, interaction automation, and form testing. Use when the user needs to test web pages, automate browser interactions, fill forms, test validation, run multi-step wizards, or test login/signup flows.
Debug web and Node.js applications using console inspection, network analysis, and non-blocking code debugging. Use when the user reports bugs, wants to debug JavaScript (browser or backend), inspect network requests, troubleshoot page/API issues, trace function calls, or monitor exceptions.
CLI for debugging Node.js backend processes with non-blocking inspection. Use when the user needs to connect to Node.js processes (by PID, name, Docker, or port), set tracepoints/logpoints/exceptionpoints, capture call stacks and local variables, or inspect console logs. Requires daemon; connect before other debug commands.
Analyze web and backend performance using Web Vitals, network timing, and Node.js metrics. Use when the user asks about page performance, load times, Core Web Vitals (LCP, CLS, INP), slow pages, backend bottlenecks, or SEO performance factors.
| name | observability |
| description | Monitor and debug web and Node.js 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. |
| allowed-tools | Bash(browser-devtools-cli:*), Bash(node-devtools-cli:*) |
Monitor and debug web and Node.js applications using OpenTelemetry, console logs, network requests, and distributed tracing.
This skill activates when:
browser-devtools-cli o11y get-trace-id
browser-devtools-cli o11y new-trace-id
browser-devtools-cli o11y set-trace-id --trace-id "abc123def456..."
browser-devtools-cli o11y get-console-messages
browser-devtools-cli --json o11y get-console-messages --type warning
browser-devtools-cli --json o11y get-console-messages --search "error"
browser-devtools-cli --json o11y get-http-requests
browser-devtools-cli --json o11y get-http-requests --resource-type fetch
browser-devtools-cli --json o11y get-http-requests --status '{"min":400}'
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
Browser DevTools MCP can inject and extract W3C Trace Context headers:
traceparent: Contains trace-id, span-id, and trace flagstracestate: Vendor-specific trace informationBrowser Session
│
├─► trace-id: abc123
│
▼
Frontend Request
│
├─► Header: traceparent: 00-abc123-def456-01
│
▼
Backend Service
│
├─► Logs with trace-id: abc123
│
▼
Observability Platform
│
└─► Full trace visualization
When correlating frontend traces with backend behavior, use node-devtools-cli to inspect Node.js processes:
# Connect to backend
node-devtools-cli --session-id backend debug connect --pid 12345
# Get console logs from Node process (can correlate with trace ID in logs)
node-devtools-cli --session-id backend --json debug get-logs
node-devtools-cli --session-id backend --json debug get-logs --search "trace"
# Optional: set tracepoints on backend handlers to capture call context
node-devtools-cli --session-id backend debug put-tracepoint \
--url-pattern "routes/api.ts" \
--line-number 25
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 --type error
# 6. Check network requests
browser-devtools-cli $SESSION --json o11y get-http-requests
# 7. Cleanup
browser-devtools-cli session delete trace-session
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"
| 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 | - |
| Type | Description |
|---|---|
none | Disabled |
console | Log to console |
otlp/http | Send to OTLP collector |
OTEL_EXPORTER_HTTP_URL=http://localhost:4318
OTEL_EXPORTER_HTTP_URL=http://tempo:4318
OTEL_EXPORTER_HTTP_URL=https://api.honeycomb.io
OTEL_EXPORTER_HTTP_HEADERS=x-honeycomb-team=YOUR_API_KEY
OTEL_EXPORTER_HTTP_URL=http://localhost:4318