Vite Plugin Vibe3 Inspector

A Vite plugin designed specifically for debugging Vibe3 applications with visual element inspection capabilities.

Features

• 🎯 Visual Element Inspection: Highlight DOM elements on hover
• 📌 Element Pinning: Click elements to pin the inspector panel
• 🔍 Component Information: Display detailed information about Vibe3 components
• 🎨 Beautiful Interface: Modern inspector interface design
• ⚡ Zero Configuration: Ready to use out of the box
• 📤 PostMessage Integration: Send component information via postMessage for external tools
• 🛠️ Debug Console: Enhanced debugging with console logging

Installation

npm install vite-plugin-vibe3-inspector --save-dev

Usage

Add the plugin to your Vibe3 project's vite.config.ts file:

import { defineConfig } from 'vite'
import vibe3Inspector from 'vite-plugin-vibe3-inspector'

export default defineConfig({
  plugins: [
    // Your other plugins...
    vibe3Inspector()
  ]
})

Instructions

1. After starting the development server, the plugin will automatically inject inspector functionality
2. Hover over page elements to display blue highlight borders
3. Click any element to pin the inspector panel
4. View detailed information about Vibe3 components in the pinned panel
5. Use the "Reference" and "Source Code" buttons to interact with external tools
6. Check browser console for debug information and postMessage events

PostMessage Integration

The inspector sends messages via postMessage when buttons are clicked:

// Reference button click
{
  source: 'vite-plugin-vibe3-inspector',
  info: 'path/to/file.tsx:10:5',
  action: 'reference'
}

// Source Code button click
{
  source: 'vite-plugin-vibe3-inspector',
  info: 'path/to/file.tsx:10:5',
  action: 'source_code'
}

Listen for these messages in your application:

window.addEventListener('message', function(event) {
  if (event.data && event.data.source === 'vite-plugin-vibe3-inspector') {
    console.log('Inspector action:', event.data.action);
    console.log('Component info:', event.data.info);
  }
});

Development Mode

Only enabled in development environment, automatically disabled in production builds.

License

MIT