Bunny Inspector

About

Bunny Inspector is the developer's sidecar for AI-assisted debugging. Capture everything your AI coding assistant needs to understand and fix web issues.

Key Features:

Element Inspection & Annotation
- Hover and click to capture any DOM element
- Auto-detects React/Vue source file locations (file:line)
- Stores CSS selectors for precise element targeting
- Add notes and context to each annotation

Context Capture
- Screenshot viewport or specific elements
- Record console logs (errors, warnings, info)
- Capture network requests with response data
- Sensitive headers automatically redacted for security

AI-Ready Export
- Export as structured ZIP bundle
- Includes markdown summary, HTML snapshots, screenshots
- Network HAR format for request/response analysis
- Perfect for pasting into Claude, ChatGPT, or any AI assistant

Privacy First
- All data stored locally in your browser (IndexedDB)
- Nothing sent to external servers
- You control when and what to export
- Sensitive data automatically redacted

Perfect For:
- Debugging complex UI issues with AI assistance
- Creating detailed bug reports
- Sharing page context with team members
- Documenting frontend behavior

How It Works:
1. Click the Bunny Inspector icon to open the side panel
2. Enable inspection mode and hover over elements
3. Click to annotate - element details captured automatically
4. Export your session as a ZIP bundle
5. Share with your AI coding assistant for debugging help