devtap

devtap

Stream console logs and network activity from all your browsers to the terminal in real-time.

# Launch Chrome and start listening
npx devtap --open http://localhost:3000

# Or attach to already-running browsers
npx devtap

[chrome]  [console]  log    "User clicked submit"
[chrome]  [console]  error  Uncaught TypeError: Cannot read property 'x' of null
[chrome]  [network]  ← REQ  GET https://api.example.com/users
                      │ Host: api.example.com
                      │ Authorization: Bearer [REDACTED]
                      │ Accept: application/json
[chrome]  [network]  → RES  200 OK (142ms)
                      │ Content-Type: application/json
                      │ Content-Length: 1234
[firefox] [console]  warn   "Deprecated API usage"
[firefox] [network]  ← REQ  GET https://cdn.example.com/app.js
[firefox] [network]  → RES  200 OK (312ms)
[webkit]  [console]  log    "Page loaded"

Features

• Multi-browser — Chrome, Edge, Firefox, and WebKit (via Playwright) in parallel
• Console + Network — full request/response with headers, body, and timing
• Secret redaction — Authorization, Cookie, API keys auto-redacted by default
• Host filtering — --host api.example.com or --host "*.example.com"
• Status filtering — --status 4xx to see only errors
• LLM-readable output — --llm flag for clean markdown, perfect for AI tools
• JSON output — --json for NDJSON piping
• Compact mode — --compact for single-line network summaries
• Tail mode — -n 100 to keep last N events
• Auto-launch — --open http://localhost:3000 launches browser(s) and starts listening instantly
• Headless mode — --headless with --open for CI/scripting (no visible browser window)

Quick Start

The easiest way to use devtap — launch a browser and start listening:

# Launch Chrome, open a URL, and stream all logs + network
npx devtap --open http://localhost:3000

# Launch multiple browsers at once
npx devtap --open http://localhost:3000 --browser chrome,firefox

# Headless mode (no visible window — great for CI/scripts)
npx devtap --open http://localhost:3000 --headless

# Headless + JSON output, piped to a file
npx devtap --open http://localhost:3000 --headless --json > logs.ndjson

Attach to Running Browsers

Alternatively, attach to browsers you've already launched with debugging enabled:

Chrome / Chromium / Edge

# macOS Chrome
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# macOS Edge
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

Firefox

firefox --remote-debugging-port 6000

Then in another terminal:

npx devtap

Usage

# Launch browser and open URL (easiest)
npx devtap --open http://localhost:3000
npx devtap --open http://localhost:3000 --browser chrome,firefox,webkit
npx devtap --open http://localhost:3000 --headless

# Auto-detect and connect to all running browsers
npx devtap

# Filter to specific browsers
npx devtap --browser chrome
npx devtap --browser chrome,firefox

# Filter to specific streams
npx devtap --only console
npx devtap --only network

# Tail mode — show last N events then follow
npx devtap --tail
npx devtap -n 100
npx devtap -n 50 --only network

# Filter by host
npx devtap --host api.example.com
npx devtap --host "*.example.com"
npx devtap --host api.example.com,cdn.example.com

# Filter network by status
npx devtap --status 4xx
npx devtap --status 500

# Custom debug ports
npx devtap --chrome-port 9222 --firefox-port 6000

# JSON output (NDJSON, for piping)
npx devtap --json

# Disable secret redaction
npx devtap --no-redact

# LLM-readable mode — no colors, markdown-structured
npx devtap --llm
npx devtap --llm -n 50 --host api.example.com | pbcopy

# Compact network output (single-line)
npx devtap --compact

# Launch + headless + filter (great for CI)
npx devtap --open http://localhost:3000 --headless --only network --host localhost --json

Output Modes

Default (colored, verbose)

[chrome]  [network]  ← REQ  GET https://api.example.com/users
                      │ Host: api.example.com
                      │ Authorization: Bearer [REDACTED]
[chrome]  [network]  → RES  200 OK (142ms)
                      │ Content-Type: application/json

Compact (--compact)

[chrome]  [network]  ← GET  https://api.example.com/users
[chrome]  [network]  → 200  https://api.example.com/users  (142ms)

LLM (--llm)

## Chrome — Network
### GET https://api.example.com/users
Request Headers:
  Host: api.example.com
  Authorization: Bearer [REDACTED]
Response: 200 OK (142ms)
Response Headers:
  Content-Type: application/json
Response Body:
  {"users": [{"id": 1, ...}]}

JSON (--json)

Each event is a single JSON line (NDJSON):

{"type":"network-request","browser":"chrome","method":"GET","url":"https://api.example.com/users","headers":{"Host":"api.example.com"},"timestamp":1700000000000}

Secret Redaction

By default, devtap redacts sensitive values:

• Headers: Authorization, Cookie, Set-Cookie, X-API-Key, X-Auth-Token, X-CSRF-Token, and more
• Bodies: password, secret, token, api_key, client_secret, private_key fields
• Tokens: JWT patterns (eyJ...) and Bearer tokens

Use --no-redact to disable redaction.

Browser Support

Chromium-based (via Chrome DevTools Protocol)

Browser	--browser flag	--open	Attach
Google Chrome	chrome	✅	✅
Chromium	chromium	✅	✅
Microsoft Edge	edge	✅	✅
Opera	opera	✅	✅
Brave	brave	✅	✅
Vivaldi	vivaldi	✅	✅
Arc	arc	✅	✅

Firefox-based (via Remote Debugging Protocol)

Browser	--browser flag	--open	Attach
Firefox	firefox	✅	✅
Zen Browser	zen	✅	✅
Waterfox	waterfox	✅	✅
LibreWolf	librewolf	✅	✅
Floorp	floorp	✅	✅
Tor Browser	tor	✅	✅

WebKit-based (via Playwright)

Browser	--browser flag	--open	Attach
WebKit	webkit	✅	—
Safari	safari	✅	—

License

MIT