One-Click AI Debug Bundles: Packaging Browser Context for LLMs

The Debugging Tax

You're staring at a broken page. You want Claude or ChatGPT to help. So you:

1. Take a screenshot, save it, upload it to the chat
2. Open DevTools, find the console errors, copy them
3. Select the relevant code or text on the page, copy that too
4. Type out the URL and describe what you were doing
5. Paste all of it together with enough context for the AI to understand

This takes 2-3 minutes every time. And you inevitably forget something — the console error you didn't copy, the network request that failed, the exact URL with query parameters.

AI Debug Bundles reduce this to one keyboard shortcut.

What Gets Captured

Press Cmd+Shift+D (or Ctrl+Shift+D) on any page. The vnsh Chrome Extension captures:

• Screenshot: The visible tab, captured via chrome.tabs.captureVisibleTab(), compressed to JPEG quality 75
• Console errors: Up to 20 recent console.error entries, captured by injecting a collector script via chrome.scripting.executeScript()
• Selected text: Whatever text you've highlighted on the page — error messages, code blocks, stack traces
• Page URL + title: The full URL including query parameters and hash, plus the document title

Everything is packaged into a structured JSON bundle:

{
  "version": 1,
  "type": "debug-bundle",
  "timestamp": "2026-02-18T12:00:00Z",
  "url": "https://app.example.com/dashboard?tab=analytics",
  "title": "Dashboard - My App",
  "selected_text": "TypeError: Cannot read property 'map' of undefined",
  "console_errors": [
    {
      "message": "Uncaught TypeError: data.items.map is not a function",
      "source": "https://app.example.com/assets/dashboard.js:142:23",
      "timestamp": 1708243200
    }
  ],
  "screenshot_base64": "..."
}

The Encryption + Share Flow

After capturing, the bundle is:

1. Serialized to JSON (typically 50-500KB depending on screenshot)
2. Encrypted with AES-256-CBC using a random key and IV generated via crypto.getRandomValues()
3. Uploaded to vnsh.dev as an encrypted blob
4. URL generated with the decryption key in the fragment: vnsh.dev/v/id#secret
5. Copied to clipboard automatically

Total time: about 2 seconds. You get a desktop notification confirming the link is ready.

How AI Reads the Bundle

When you paste the vnsh link into Claude Code (with vnsh MCP installed), Claude:

1. Detects the vnsh URL pattern
2. Fetches the encrypted blob from vnsh.dev
3. Decrypts it locally using the key from the URL fragment
4. Parses the JSON and understands it's a debug bundle
5. Analyzes the screenshot, error messages, selected text, and URL together

The AI gets complete context in one link — no follow-up questions like "can you share the console errors?" or "what URL were you on?"

Real-World Use Cases

Frontend Bug Reports

Your React app throws a white screen. Select the error boundary message, press Cmd+Shift+D. Claude sees the screenshot (white screen with error), the console errors (component stack trace), and the URL (which route broke). It can often identify the fix immediately.

CSS Layout Issues

Something looks wrong on mobile. The screenshot shows the visual bug. Select the element that looks wrong, debug-bundle it. Claude sees both the visual result and the context, and can suggest CSS fixes.

API Integration Debugging

A third-party dashboard shows an error. You can't access the source code, but you can see the error message and console output. Debug-bundle captures everything visible — the AI can analyze the error pattern even without source access.

Cross-Team Bug Sharing

A QA engineer finds a bug but isn't sure how to describe it. Cmd+Shift+D captures everything — screenshot, errors, URL, selected text — in one encrypted link. Share it in Slack. Any developer (or their AI assistant) can open it and see the full context.

Size Control

Debug bundles are capped to prevent excessive uploads:

• Screenshots: JPEG quality 75 (typically 100-300KB vs 1-3MB for PNG)
• Console errors: Maximum 20 entries
• Total bundle: Capped at 5MB

The 5MB cap keeps bundles well within vnsh's free tier upload limit while including enough context for meaningful AI analysis.

Privacy: What Doesn't Get Captured

The debug bundle captures only what's specified above. It does not capture:

• Cookies or session tokens
• localStorage or sessionStorage
• Network requests or response bodies
• Password field contents
• Extension storage or browser history

And everything that is captured is encrypted before upload. The vnsh server stores only encrypted bytes — it cannot see screenshots, errors, or any content.

Try It

Install the vnsh Chrome Extension, navigate to any page, and press Cmd+Shift+D. Paste the link into Claude or ChatGPT. See how much faster debugging gets when the AI has full context from the start.