dbug
dfurrer.com

Devtools as a heads-up display

Your devtools,
on the page.

dbug docks a configurable HUD over any site: a live network log, a console that groups itself instead of flooding, and a one-button sweep of localStorage, sessionStorage, cookies and cache. You choose the panels; they follow you from tab to tab.

Download the extension How to install
app.example.com / checkout ⌘ ⇧ D
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
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 (Unauthorized)
›vendor.js[analytics] queue flushed (5)
⚠react-domvalidateDOMNesting: <div> cannot appear in <p>
›sdk.min.jsbeacon ok (204)
✕cart.tsCannot read properties of undefined (reading 'total')
✕checkout.tsPOST /v1/checkout/intent 401 (Unauthorized)
✕cart.tsCannot read properties of undefined (reading 'total')
▶vendor.js34
▶react-dom6
▶sdk.min.js12
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 · page reloaded
6 of 18 requests · 1.2 MB · 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 / Read

Network and console side by side, filtered and folded, so the one line that matters is not buried under four hundred that do not.

03 / Sweep

Four storage backends in one list. See what is actually there, tick what should go, clear it and reload — without ever leaving the page.

What it does

Pick your panels

Network, console, storage, performance, DOM events. Turn on the ones you want, drag them where you want them, and the layout follows you to every tab.

A console that groups

Logs fold by origin, level, or repeat count. Vendor noise collapses into one row you can open when you care about it and ignore when you don't.

Network without the tab

Requests stream into the HUD as they fire, with method, status, size and a timing bar. Filter by type, status class, or any substring of the URL.

Sweep every store

localStorage, sessionStorage, cookies and Cache Storage with live key counts and byte sizes. Tick what should go, clear, and reload in one action.

Presets

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

A preset is a set of panels, their dock, and their filters. Save as many as you like and switch with a number key.

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

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

Every preset is
a file you can read.

Export from the popup, commit it next to the project it belongs to, and every machine you debug from opens the same HUD.

dbug.preset.json 
{
  "preset": "network+console",
  "dock": "bottom-right", "hotkey": "Cmd+Shift+D",
  "panels": [
    { "id": "network", "types": ["xhr", "fetch"], "hide": ["analytics"] },
    { "id": "console",  "groupBy": "origin", "fold": ["log", "info"] },
    { "id": "storage",  "stores": ["local", "session", "cookies", "cache"] }
  ],
  // per-origin overrides win over the global preset
  "origins": { "localhost:*": { "open": true } }
}
Bundle
18 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

    Network, console and storage

    • The three-panel HUD, docked, draggable and resizable, with position, size and active tab persisted.
    • Console folding by origin, level or message, with errors and warnings kept out of the groups.
    • One-pass sweep of localStorage, sessionStorage, cookies and Cache Storage, plus per-key deletes.

  2. v0.2.0next

    Presets as files

    • Export and import dbug.preset.json, with per-origin overrides.
    • Number-key switching between saved presets.

  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