breadcrumbs

Frontend debugging for Claude Code — no more switching to DevTools.

Claude injects log points into your code, reads them from a local server, and cleans everything up when the bug is fixed. You just describe the problem.

The problem it solves

The usual loop is painful:

add console.log → save → reload → open DevTools → find the log
  → select → copy → switch to Claude → paste → ask → repeat

Breadcrumbs short-circuits it:

Browser ──fetch──▶ localhost:9320 ◀──curl── Claude Code

Claude owns the whole loop. You only do two things: describe the bug, then click where it breaks.

Install

Inside a Claude Code session, run these one at a time:

/plugin marketplace add dengdengyee/breadcrumbs-skill

/plugin install breadcrumbs@dengdengyee

That's it. No npm install, no config, nothing added to your project.

What a session looks like

You:

"The user profile sometimes shows blank after login. It's inconsistent."

Claude: Reads AuthContext.tsx and useProfile.ts, forms a hypothesis about the race condition, then silently starts the log server and adds targeted log points:

// [breadcrumbs:start]
fetch('http://localhost:9320/log', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    label: 'profile fetch result',
    data: { userId, profile, authStatus },
    stack: new Error().stack
  })
}).catch(() => {});
// [breadcrumbs:end]

Claude:

"Try logging in and triggering the blank state."

You: (clicks around)

Claude reads the server:

[log-0012] 14:32:01.841 [log] profile fetch result
  → { "userId": "u_9f3", "profile": null, "authStatus": "pending" }
  ┄ at useProfile (useProfile.ts:34)
  ┄ at AuthContext.Provider (AuthContext.tsx:71)

Claude:

"Found it — the profile fetch fires before the auth token is set. The fix is to gate the fetch on authStatus === 'ready'."

Applies the fix. Asks you to reproduce. Once confirmed:

✔ src/hooks/useProfile.ts    — removed 1 block(s)
✔ src/context/AuthContext.tsx — removed 1 block(s)

2 file(s) scanned, 2 modified, 2 block(s) removed

Server stops. Nothing left behind.

How it works

1. Claude checks if the log server is running. If not, it starts breadcrumbs-logger in the background — zero interaction from you.
2. Claude injects fetch() log calls wrapped in [breadcrumbs:start] / [breadcrumbs:end] markers at the spots it wants to observe.
3. You reproduce the bug. The browser fires the fetch calls silently.
4. Claude polls GET /logs via curl and reads the structured output directly — no copy-paste.
5. If logs don't tell the full story, Claude adds more and loops back to step 3.
6. Once the fix is confirmed, Claude runs breadcrumbs-logger cleanup to strip every log block by regex, then stops the server.

Notes

• Zero project dependencies. Log calls are raw fetch() — no library, no package.json changes.
• Auto-cleanup. The [breadcrumbs:start] / [breadcrumbs:end] markers let the CLI remove injected code instantly without re-reading files through Claude.
• Port fallback. Default port is 9320. If it's taken, the server tries 9321–9329 automatically.
• Session-scoped. The server stops when your Claude Code session ends (registered via a Stop hook on first run).

Requirements

• Node.js ≥ 18
• Claude Code with plugin support