dbug
dfurrer.com

Devtools as a heads-up display

Your devtools,
on the page.

dbug docks a devtools HUD over any site — and lets you take it apart. Network, console, storage, a timeline graph and always-on diagnostics start as tabs in one window; drag any of them out into a window of its own, arrange them, and save the layout. Five themes, no telemetry.

Download the extension How to install
app.example.com / checkout ⌘ ⇧ D
dbug
Console
All 52 Error 2 Warn 6 grouped by origin
⚠vendor.jsDeprecated lifecycle: componentWillMount
›vendor.js[analytics] queue flushed (3)
›vendor.js[analytics] queue flushed (4)
✕checkout.tsPOST /v1/checkout/intent 401
›sdk.min.jsbeacon ok (204)
⚠react-domvalidateDOMNesting: <div> in <p>
✕checkout.tsPOST /v1/checkout/intent 401 ▸ {status, url, body, …}
✕cart.tsCannot read properties of undefined
▶vendor.js34
▶react-dom6
▶sdk.min.js12
52 messages · 2 errors · 6 warnings its own window
dbug
MtdRequestStSizeTiming
GET/api/session2001.2 kB
GET/assets/app.a91f.js200284 kB
POST/api/cart/items201640 B
GET/api/pricing?sku=AX-93040 B
POST/v1/checkout/intent401118 B
GET/cdn/analytics.min.js20042 kB
localStoragecart, session, flags, +11 more 14 keys · 82 kB
sessionStoragestep, referrer, ab-bucket 3 keys · 1.2 kB
Cookiesthis origin only, incl. httpOnly 11 cookies
Cache Storageworkbox-precache, api-v2, +4 6 caches · 4.1 MB
scoped to this origin
4 stores cleared · 4.2 MB freed
18 ms 24 ms 61 ms
GET /api/sessionfetch · checkout.ts
POST /v1/checkout/intentfetch · checkout.ts
200/api/session
401/v1/checkout/intent
✕ 401 (Unauthorized)error · checkout.ts
request → response log names that request
6 of 18 requests · 1.2 MB · slowest 840 ms ⌘⇧D to toggle

01 / Summon

One chord and the HUD docks over whatever page you are on. No F12, no separate window, no losing your scroll position or your form state.

02 / Arrange

Tear any tab out into a window of its own, drop it on another to merge them back, or park one on a screen edge as a peek tab. The layout is yours, and it persists.

03 / Trace

Requests, responses and console lines land on one timeline graph, in columns of time, wired together by what actually happened rather than by what might have.

What it does

Windows, not one panel

Every tab detaches. Drag one out and it becomes its own window — move it, resize it from any corner, or minimise it to the nearest screen edge as a peek tab. Drop it back on another window to merge.

A console that groups

Logs fold by origin, level or message. Vendor noise collapses into one row; errors and warnings never do. Logged objects expand as trees and stay expanded while the page keeps logging underneath you.

Network, in full

Every request with method, status, transfer size and a bar split into real phases: DNS, TCP, TLS, waiting, download. Open one for request and response headers, a timing breakdown, and copy as cURL.

Sweep every store

localStorage, sessionStorage, cookies and Cache Storage with key counts and byte sizes. Edit values in place, delete single keys, or tick what should go and clear it in one action.

A graph of what happened

Requests, responses and console lines as nodes in columns of time. Pick a window, click any node for its full detail, and pull that detail out into a window of its own.

Five themes

Terminal green by default, plus Slate and Daylight for when you would rather it looked like a tool than a toy, and Amber and Violet for when you would not.

Diagnostics, always on

Watching from the first tick: traffic shape and polled endpoints, whether a wallet is present and what the page asked it to sign, and the insecure habits that are actually observable. Report downloads as Markdown.

Make it yours

Corner radius from square to soft, window opacity so the page shows through, and a verbose switch that strips the hints and legends once you no longer need them.

Take it apart

One panel was never
going to be enough.

Every tab is a window waiting to happen. Pull the console onto your second monitor, keep the network log small in a corner, and park storage on an edge until you need it.

NetworkConsoleStorage
Console
Drag a tab out. It becomes its own window where you dropped it.
NetworkStorage
Console
Drop it on a title bar. The two windows merge back into tabs.
NetworkStorage
◀Console
Minimise it. The window sticks to the nearest edge as a peek tab.
Ready-made arrangements
Together one window, every panel a tab Split one window each, tiled Two up traffic on the left, what reads it on the right Focus one large, the rest parked on an edge Adaptive into whatever room the page has left

Or arrange it yourself and save the layout — it comes back that way next time. Adaptive reads the page and drops the windows into its own empty space, falling back to a tidy tile when there is none. Resize from all four corners and all four sides, and scale the whole HUD, text included, from 70% to 160%. Closing a window does not close the others: its panels return as tabs on the nearest one.

Minimise sends a window to the corner dock — a triangle wedged into whichever corner you drag it to, opening along its own diagonal into a roster of every panel, lit when it is out and quiet when it is put away.

The timeline

Columns are moments.
Edges are evidence.

Requests, their responses and console lines all land on one axis. A column is an instant; a column holding several nodes is several things that happened at once.

Lifecycle

A request and its own response. Always known.

Mentions

A console line whose text names that request’s URL.

Sequence

Two consecutive events from the same script file.

What it will not draw

“This request caused that one.” The page never tells us that, so dbug does not claim it. A request’s initiator comes from reading the stack at the moment fetch was called — genuine, and attributed to the calling file. Every other edge is a fact you could verify by hand. A graph that looks authoritative while guessing would be worse than no graph.

Pick the window by typing a from and a to, by preset, or hand it over from the network drawer

Diagnostics

It has been watching
since the first tick.

The probe records from document_start whether or not the HUD is open, so the diagnostics panel is analysis over what already happened. Nothing to start, nothing to arm.

Traffic

How much, how fast, to whom. Third-party hosts, endpoints being polled and their interval, failures, and anything over half a megabyte.

Wallet

Whether window.ethereum, window.solana or window.phantom is present and which extension injected it — and every method the page asked for, flagging eth_sendTransaction and personal_sign.

Insecure habits

Mixed content, credential-shaped query parameters, postMessage to "*", third-party scripts, cookies missing Secure or httpOnly, and storage values shaped like a JWT, a key or a mnemonic.

What the report contains

Report re-analyses and opens Markdown in its own window, with a download button — and does not pause the monitoring. It carries names, URLs and shapes only: never a stored value, a header value or a cookie value. You can paste it into an issue without leaking the thing it is warning you about. Findings that are heuristics say so in their own text.

Themes

Green is the default.
It is not the only one.

Five flat palettes, and four premium ones that build a real surface: a specular top edge, brushed grain, fine noise so large areas never band, and one slow sheen crossing the panel. Accent, surface and text are separately overridable.

Premium — a surface, not a palette

dbug NetworkConsoleStorageTimeline
GET/api/session2001.2 kB
GET/assets/app.a91f.js200284 kB
POST/api/cart/items201640 B
GET/api/pricing?sku=AX-93040 B
POST/v1/checkout/intent401118 B
GET/cdn/analytics.min.js20042 kB
6 of 18 requests · 1.2 MBterminal

Layouts

The HUD you keep,
not the one you are given.

A layout is the windows you arranged, their tabs, where they sit and what they filter. dbug remembers yours and syncs it across your browsers. Here are four shapes it takes.

preset — network + console dock: bottom-right · ⌘⇧1

Why a HUD

The panel is not
where the page is.

Devtools today
With dbug

F12, then hunt for the right tab, every single time

One chord, and the panels you chose are already open

A docked pane eats a third of the viewport you are debugging

A HUD you park in a corner, size once, and see the page behind

One pane, one layout, whatever the task happens to be

Every tab detaches into its own window, or merges back, or parks on an edge

Network here, console there, and the connection in your head

One timeline graph with both on it, wired by what was actually observed

The console floods with four hundred lines of vendor noise

Folded by origin and level, with the two errors left standing

Four different screens to clear four kinds of storage

One list, four checkboxes, one button, then a reload

Layout and filters reset the moment you close the window

Both persist, per origin, and sync across your browsers

Configuration

Your whole setup is
one readable record.

Everything the HUD knows about your setup is one plain record: which windows exist, what is in them, where they sit, how the console folds, what the network hides. It syncs, so every browser you sign into opens the same HUD.

chrome.storage.sync — dbug:settings 
{
  "theme": "slate",
  "frames": [
    { "panels": ["network", "storage"], "active": "network",
      "pos": { "x": 980, "y": 420 }, "size": { "w": 620, "h": 400 } },
    { "panels": ["console"], "docked": "right" },
    { "panels": ["timeline"], "collapsed": false }
  ],
  "groupBy": "origin", "foldVendor": true, "netSort": "duration",
  "netHide": ["analytics"], "range": { "from": 1200, "to": 4800 },
  // remembered per site, so localhost comes up already open
  "openOrigins": { "http://localhost:5173": true }
}
Bundle
50 kB gzipped
Permissions
storage, cookies
Buffers
2000 logs, 1000 reqs
Requires
Chrome 111+

Install in under a minute

Download,
load unpacked.

dbug is a Manifest V3 extension for Chrome 111 and up, plus Edge and Brave. It makes no network calls of its own and sends nothing anywhere. It asks for storage to keep your settings, and cookies plus site access so the storage panel can list and clear them — switch that panel off and it never touches the cookies API.

  1. Download the zip and unpack it anywhere.
  2. Open chrome://extensions.
  3. Enable Developer mode.
  4. Click Load unpacked and select the unpacked folder.
  5. Open any page and hit ⌘⇧D. Done.
Download dbug

Releases

Where it is today.

  1. v0.1.0shipped

    Windows, network, console, storage, timeline

    • Detachable windows: tear a tab out, drop it on another to merge, minimise to a screen edge.
    • Network rows split into real timing phases, with headers, a breakdown and copy as cURL.
    • Console folding by origin, level or message, and logged objects as expandable trees.
    • Storage: filter, edit values in place, delete single keys, or sweep all four backends.
    • Timeline graph of requests, responses and logs, with pop-out detail windows.
    • Always-on diagnostics: traffic shape, wallet use, insecure habits, Markdown report.
    • Arrangements including adaptive placement, saved layouts, eight-way resize.
    • A corner dock that minimised windows fold into, draggable to any corner.
    • Whole-HUD scaling, configurable corners and opacity, and per-token colour.
    • Nine themes, four of them premium surfaces rather than palette swaps.

  2. v0.2.0next

    Named layouts

    • Save more than one layout and switch between them with a number key.
    • Export and import them as a file, with per-origin overrides.

  3. v0.3.0after that

    More panels

    • Performance marks, long tasks and layout shifts on a shared timeline.
    • A DOM event tap, and request replay straight from the network row.

Stop opening the panel.
Keep it on the page.

Free, unpacked, and yours to change. One zip, four steps, and the HUD is on every tab you open.

Download the extension See the presets

Chrome 111+ · Edge · Brave — Manifest V3, no account, no telemetry