# Observability (o11y) Tools
Performance monitoring, logging, and tracing commands.
## get-web-vitals
Collect Web Vitals performance metrics with recommendations.
```bash
browser-devtools-cli o11y get-web-vitals [options]
```
**Arguments:**
| Argument | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `--wait-ms` | number | No | `0` | Wait duration before reading metrics (0-30000) |
| `--include-debug` | boolean | No | `false` | Include debug details |
**Metrics collected:**
| Metric | Description | Good | Poor |
|--------|-------------|------|------|
| LCP (ms) | Largest Contentful Paint | ≤ 2500 | > 4000 |
| INP (ms) | Interaction to Next Paint | ≤ 200 | > 500 |
| CLS (score) | Cumulative Layout Shift | ≤ 0.1 | > 0.25 |
| TTFB (ms) | Time to First Byte | ≤ 800 | > 1800 |
| FCP (ms) | First Contentful Paint | ≤ 1800 | > 3000 |
**Examples:**
```bash
# Basic metrics
browser-devtools-cli o11y get-web-vitals
# Wait for metrics to settle
browser-devtools-cli o11y get-web-vitals --wait-ms 2000
# With debug info (JSON for parsing)
browser-devtools-cli --json o11y get-web-vitals --include-debug
```
**Output (JSON):**
```json
{
"url": "https://example.com/",
"metrics": {
"lcpMs": 1200,
"inpMs": 150,
"cls": 0.05,
"ttfbMs": 400,
"fcpMs": 900
},
"ratings": {
"lcp": { "rating": "good", "value": 1200 },
"inp": { "rating": "good", "value": 150 },
"cls": { "rating": "good", "value": 0.05 }
},
"recommendations": {
"coreWebVitalsPassed": true,
"summary": ["Core Web Vitals look good..."]
}
}
```
---
## get-console-messages
Capture browser console messages.
```bash
browser-devtools-cli o11y get-console-messages [options]
```
**Arguments:**
| Argument | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `--types` | array | No | all | Filter by type: log, warn, error, info, debug |
| `--clear` | boolean | No | `false` | Clear messages after reading |
**Examples:**
```bash
# All console messages
browser-devtools-cli o11y get-console-messages
# Only errors and warnings (JSON for parsing)
browser-devtools-cli --json o11y get-console-messages --types error,warn
# Clear after reading
browser-devtools-cli o11y get-console-messages --clear
```
---
## get-http-requests
Monitor HTTP requests and responses.
```bash
browser-devtools-cli o11y get-http-requests [options]
```
**Arguments:**
| Argument | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `--url-pattern` | string | No | - | Filter by URL pattern (glob) |
| `--method` | string | No | - | Filter by HTTP method |
| `--status` | number | No | - | Filter by status code |
| `--clear` | boolean | No | `false` | Clear requests after reading |
**Examples:**
```bash
# All requests (JSON for parsing)
browser-devtools-cli --json o11y get-http-requests
# Only API calls
browser-devtools-cli --json o11y get-http-requests --url-pattern "**/api/**"
# Only failed requests
browser-devtools-cli --json o11y get-http-requests --status 500
# Only POST requests
browser-devtools-cli --json o11y get-http-requests --method POST
```
---
## get-trace-id
Get the current OpenTelemetry trace ID.
```bash
browser-devtools-cli o11y get-trace-id
```
---
## new-trace-id
Generate a new OpenTelemetry trace ID.
```bash
browser-devtools-cli o11y new-trace-id
```
---
## set-trace-id
Set a specific OpenTelemetry trace ID.
```bash
browser-devtools-cli o11y set-trace-id --trace-id <id>
```
**Arguments:**
| Argument | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `--trace-id` | string | Yes | - | Trace ID to set |
**Example:**
```bash
browser-devtools-cli o11y set-trace-id --trace-id "custom-trace-123"
```
## Performance Analysis Example
```bash
SESSION="--session-id perf-test --json"
# Navigate
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
# Wait for load
browser-devtools-cli $SESSION sync wait-for-network-idle
# Get Web Vitals (wait for metrics to settle)
VITALS=$(browser-devtools-cli $SESSION o11y get-web-vitals --wait-ms 2000)
echo "Web Vitals: $VITALS"
# Check for console errors
ERRORS=$(browser-devtools-cli $SESSION o11y get-console-messages --types error)
echo "Errors: $ERRORS"
# Analyze HTTP requests
REQUESTS=$(browser-devtools-cli $SESSION o11y get-http-requests)
echo "Requests: $REQUESTS"
# Screenshot for reference
browser-devtools-cli $SESSION content take-screenshot --name "perf-analysis"
```
## Distributed Tracing Example
```bash
SESSION="--session-id trace-test --json"
# Set trace ID for correlation
browser-devtools-cli $SESSION o11y set-trace-id --trace-id "test-trace-001"
# Navigate and perform actions
browser-devtools-cli $SESSION navigation go-to --url "https://api.example.com"
browser-devtools-cli $SESSION interaction click --selector "#fetch-data"
browser-devtools-cli $SESSION sync wait-for-network-idle
# Get HTTP requests with trace
browser-devtools-cli $SESSION o11y get-http-requests
# Verify trace ID
browser-devtools-cli $SESSION o11y get-trace-id
```
## CI/CD Health Check Example
```bash
#!/bin/bash
set -e
CLI="browser-devtools-cli --json --quiet --session-id health-$$"
# Navigate
$CLI navigation go-to --url "https://example.com"
$CLI sync wait-for-network-idle
# Check Web Vitals
VITALS=$($CLI o11y get-web-vitals --wait-ms 1000)
LCP=$(echo $VITALS | jq '.metrics.lcpMs')
if [ "$LCP" -gt 4000 ]; then
echo "LCP too high: $LCP ms"
exit 1
fi
# Check for console errors
ERRORS=$($CLI o11y get-console-messages --types error)
if [ "$ERRORS" != "[]" ]; then
echo "Console errors: $ERRORS"
exit 1
fi
echo "Health check passed"
```
