@rspnseapp/dev-inspector

A Vite plugin that enables Rspnse inspect functionality on localhost dev servers without requiring a browser extension.

Installation

npm install @rspnseapp/dev-inspector --save-dev

Usage

Add the plugin to your Vite config:

// vite.config.ts
import { defineConfig } from 'vite';
import { rspnseInspector } from '@rspnseapp/dev-inspector';

export default defineConfig({
  plugins: [rspnseInspector()]
});

Then:

1. Start your dev server (e.g., npm run dev)
2. Open rspnse.net
3. Enter your localhost URL (e.g., http://localhost:5173)
4. Use the inspect feature - works in any browser!

Options

rspnseInspector({
  // Disable the inspector (defaults to true)
  enabled: true,

  // Add additional trusted origins beyond the defaults
  trustedOrigins: ['https://custom-domain.com']
})

How It Works

The plugin injects a small script into your dev server pages that:

• Listens for postMessage commands from rspnse.net
• Enables element inspection with hover highlighting
• Captures computed styles from selected elements
• Allows CSS injection for live editing

Communication uses the same protocol as the browser extension, so the main Rspnse app works seamlessly with either approach.

Security

• Only responds to messages from trusted origins (rspnse.net and localhost by default)
• Only runs in development mode (not included in production builds)
• No data is sent to any external servers

Browser Support

Works in all modern browsers - Chrome, Firefox, Safari, and Edge.

License

MIT