Live debugging
SkillWeb & browsingLets your agent debug a running local app by reading logs, tracing requests, and controlling a headless browser.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Live debugging skill
About this capability
Debug the running local stack with traces, logs, and a shared headless browser. Use when investigating a bug in a running service, tracing a request across services, reading service logs, reproducing a frontend issue, or writing/reviewing tracing instrumentation.
What this skill tells your AI
The instructions your AI receives, as published by macro-inc/macro in .claude/skills/live-debug/SKILL.md and read by ahel’s review.
just run_local and just stack up start the LGTM collector by default and
the agent browser with --with-chrome (both global: one per machine, shared
across instances, left running):
| Endpoint | What |
|---|---|
| http://localhost:3001 | Grafana (anonymous admin) — traces + logs UI |
| http://localhost:3200 | Tempo API — traces |
| http://localhost:3100 | Loki API — service logs |
| http://localhost:9090 | Prometheus API — metrics |
| localhost:4317 / 4318 | OTLP intake (gRPC / HTTP), alias otel-collector |
| http://localhost:9222 | Headless Chrome (CDP) |
--traces off disables the collector; --traces jaeger|datadog swaps it.
All collectors bind 4317/4318 — exactly one runs at a time.
Every Rust service exports spans AND its tracing events (as correlated log
records) over OTLP. The frontend exports browser spans through the proxy and
propagates traceparent, so one trace covers browser → proxy → services.
Wiring happens at stack start: if you start a collector by hand, restart the
stack to pick it up.
Query telemetry (prefer APIs over the Grafana UI)
The grafana MCP server (.mcp.json / opencode.json / .cursor/mcp.json,
Docker mcp/grafana on the host network) is pointed at this Grafana. Prefer its tools:
- Logs:
query_loki_logs,list_loki_label_values,find_error_pattern_logs - Traces:
tempo_traceql-search,tempo_get-trace,tempo_get-attribute-values,tempo_docs-traceql(proxied from Tempo's own MCP server; everytempo_*call needsdatasourceUid: "tempo") - Metrics:
query_prometheus; plussearch_dashboards,generate_deeplink
Datasource UIDs are stable: loki, prometheus, tempo, pyroscope.
Typical calls — service names are the binary names (email_service,
document-storage-service); match on route, duration, or any span attribute:
tempo_traceql-search{datasourceUid: "tempo", query: '{resource.service.name="email_service" && status=error}'}(also'{span.http.route="/documents" && duration>500ms}'), thentempo_get-tracewith the returned trace ID. Searches default to the past hour; widen with RFC3339start/end.query_loki_logs{datasourceUid: "loki", logql: '{service_name="email_service"} |= "error"'}— log lines carrytrace_id/span_idfor correlation. Discover services withlist_loki_label_valuesonservice_name.
Timing quirks: Tempo's search index flushes every ~30s — a trace you just produced is fetchable by ID immediately but may not show in search yet.
Everything above is also plain HTTP: TraceQL search at
http://localhost:3200/api/search?q=<traceql>, trace fetch at
/api/traces/<id>, LogQL at
http://localhost:3100/loki/api/v1/query_range?query=<logql> (start/end
are unix epoch nanoseconds). Use the HTTP form when there is no MCP (pi),
and for bulk retrieval you want to reduce before reading — a full trace can
be 50+ spans, so curl /api/traces/<id> | jq (filter to slow spans, compute
offsets) beats dumping tempo_get-trace output into context. docker compose -p macro logs -f <service> still works for raw stdout, but Loki is queryable
and survives restarts.
Verbosity knobs (set in the shell before just run_local, or per service in
Doppler): RUST_LOG filters console + Loki output; OTEL_TRACE_FILTER
independently filters exported spans (default info). Lowering RUST_LOG
never silences traces.
Drive the shared headless Chrome
--with-chrome runs a headless Chrome in Docker with CDP on 9222 (if 9222
doesn't answer, start it: the compose command is in the headless-chrome
comment in docker/docker-compose.yml). The chrome-devtools MCP server
(.mcp.json / opencode.json / .cursor/mcp.json) is already pointed at
it — prefer its tools (navigate, snapshot, click, evaluate, console, network) for browser
work. State (cookies, login) persists across agent sessions until the
container restarts.
- The container uses host networking, so plain localhost URLs work: the app
is http://localhost:3000/app, the proxy
http://localhost:8090(named instances remap these ports; read the stack summary). - A human can watch the browser live at http://localhost:6080/vnc.html (noVNC over the Xvfb display) — work in the visible window, not isolated contexts, when someone may be watching.
- Login is passwordless: any email works, and the login API returns the code in its response (also visible in Mailpit at http://localhost:8025).
- From Playwright instead:
chromium.connectOverCDP('http://localhost:9222'). For token-injection and route-interception recipes seeapps/web/docs/playwright-debugging.md.
Correlate a browser repro with backend traces: note the time, then search
Tempo for that window — the browser's traceparent means the frontend action
and the Rust handler share one trace ID.
chrome-devtools technique
- Snapshot-first:
take_snapshotafter every navigation or pane change; act only on uids from the latest snapshot (uid prefixes bump on re-render). Macro snapshots are huge — split panes duplicate the doc text — so save big ones to a file (filePathparam) and grep them. navigate_pagecan time out while the SPA actually loaded (cold Vite compile); follow withwait_foron expected text instead of re-navigating.wait_formatches any text presence, including placeholders. For "AI finished"-style conditions, poll inevaluate_scriptfor the Stop button's absence — the only reliable completion signal.fillworks on plain inputs but NOT contenteditable: click to focus, thentype_text(Enter splits paragraphs/sends). Combobox token fields need type → wait for the "N options available" live region → Enter to tokenize.- If a radio/tab control won't click ("did not become interactive"), click its adjacent label text node instead.
- On any error dialog or blank state:
list_console_messages+list_network_requests(filter xhr/fetch), thenget_network_requestfor the failing request's body — pairing console error with failing request localizes the fault in one step. - Verify editor state with
evaluate_script(e.g. query[contenteditable] strongto confirm an AI edit) — cheaper and more precise than screenshots.
Driving the Macro app
The condensed version is below; the full field-tested guide (routes, every
surface, keyboard model, crash recovery, trace correlation from a network
request's traceparent) is docs/AGENT_GUIDE/.
- Unauthenticated users land on
/app/welcome: "Continue with email" → fill the email input → "Continue". Locally this may log in with no code prompt; otherwise the code is in Mailpit. First login auto-creates the user. - Documents live at
/app/md/<uuid>; a doc-scoped AI chat at/app/md/<uuid>/chat/<chatId>; split panes give the right pane its own URL segment (/app/md/<uuid>/channel/<channelId>). - Everything is created via the top-left "Create" button (Document D, Channel G, Message M, Task T, …). Sidebar buttons are named "Go to X" in the a11y tree. Search is the "Search" button — results appear as you type, no Enter.
- Editor: title field is focused on creation; type the title, Enter moves
into the body. The contenteditable's a11y
valueexposes the full body text, so snapshots double as content verification. - AI edit: "Edit with AI" button under the editor → type the instruction → Enter. Edits apply in place; done when the "Stop" button disappears. AI chat: "Ask Macro" in the doc's Actions panel (doc pre-attached), Enter sends, "Stop generating" disappears when the response is complete.
- Channels: "Create" → Channel → name it, tokenize invitees in the "To:" combobox, "Create Channel". Verify membership in the Participants tab. Composer: Enter sends; the "Task" switch turns a message into a task.
Write tracing code that is debuggable
Follow CLAUDE.md's tracing rules (err on Result-returning #[instrument],
never level = "info", tracing::error!(error=?e, "msg"), prefer
.inspect_err). Beyond those:
- Instrument boundaries, not plumbing: HTTP handlers get spans from
macro_tower_layers; add#[tracing::instrument]to queue consumers, cross-service client calls, and multi-step business operations — the places a trace would otherwise go dark. - Skip bulky args (
#[instrument(skip(payload), fields(document_id = %id))]) and record the IDs you will actually search by: entity IDs, user IDs, counts. A span you can't find by ID is a span you can't use. - Record late-known values with
tracing::Span::current().record(...)rather than emitting a second event. - Events inside a span inherit its trace: one
tracing::warn!with fields beats three unstructureddebug!s. Fields, not format strings —warn!(attempts, "retrying"), notwarn!("retrying attempt {attempts}"). - Verify your instrumentation live: run the code path, then confirm the span shows up in Tempo with the fields you expect. Unverified instrumentation is the usual reason "the trace was empty" during a real incident.
Signals
- GitHub stars
- 4k
- Forks
- 409
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
live-debug- Source
- github.com/macro-inc/macro