Give your coding agent a real debugger. Set breakpoints, step through code, inspect variables — and observe the browser session at every step.
── SESSION: checkout-flow ──────────────
▸ Navigation 3 pages
▸ Network 47 requests (2 failed)
▸ Console 8 errors, 3 warnings
▸ DOM 12 mutations
▸ Storage 4 changes
▸ Framework React — 3 bug patterns
⚑ Markers
00:12 "login completed"
00:34 "added item to cart"
00:51 "checkout submitted" ← 500 error── STOPPED at app/services/order.py:147 ──
Call Stack (3 frames)
→ order.py:147 apply_discount
cart.py:89 checkout
views.py:34 post
Source
145│ subtotal = sum(item.price for item in items)
146│ discount = calculate_discount(code)
→ 147│ final = subtotal * discount # Bug: discount is -0.15
148│ return Order(total=final)
Locals
items = [Item("Widget", 29.99), Item("Gadget", 49.99)]
subtotal = 79.98
discount = -0.15 ← expected 0.85
code = "SAVE15"Full session recording via Chrome DevTools Protocol — network, console, DOM, storage, and framework state, compressed into an agent-readable viewport.
Capture all XHR/fetch requests with status codes, timing, headers, and response bodies.
Inspect React, Vue component trees, props, and state at any moment in the session.
Every console.log, warning, and unhandled error — timestamped and correlated with network events.
Track DOM mutations, user interactions, form inputs, and scroll position over time.
Automatic screenshots at markers and on errors. Visual context for every bug.
localStorage, sessionStorage, cookies, and IndexedDB — all changes captured and diffed.
$ krometrail browser record --url https://app.example.com --session checkout-flow
Recording session... Press Ctrl+C to stop.
$ krometrail browser search --session checkout-flow "500 error"
Found 1 match in Network events:
POST /api/orders → 500 Internal Server Error (00:51)
Response: {"error": "discount_code_invalid"}
$ krometrail browser inspect --session checkout-flow --at 00:51 --focus network,console
── BROWSER STATE at 00:51 ──
Network: POST /api/orders 500 (2.1s)
Console: Error: Unhandled promise rejection: discount_code_invalid
Framework React: OrderForm state { code: "SAVE15", applying: true }
→ discountApplied never set (component stuck in loading state)10 languages via the Debug Adapter Protocol — one interface, any runtime.
Three ways to get Krometrail into your agent's hands.
{
"mcpServers": {
"krometrail": {
"command": "krometrail",
"args": ["mcp"]
}
}
}Purpose-built for AI agents, not adapted from human debugger tools.
| Feature | Krometrail | AIDB | mcp-debugger | mcp-dap-server |
|---|---|---|---|---|
| Viewport abstraction | ✓ | ◐ | ✗ | ✗ |
| Context compression | ✓ | ✗ | ✗ | ✗ |
| Browser observation | ✓ | ✗ | ✗ | ✗ |
| 10+ languages | ✓ | ◐ | ◐ | ◐ |
| Conditional breakpoints | ✓ | ✓ | ◐ | ✓ |
| Watch expressions | ✓ | ✗ | ✗ | ✗ |
| Framework detection | ✓ | ✓ | ✗ | ✗ |
| CLI parity | ✓ | ✗ | ✗ | ✗ |
| Token awareness | ✓ | ✗ | ✗ | ✗ |
✓ Full support ◐ Partial ✗ Not supported