ui-inspector

A small Vite plugin for inspecting React components during development. It injects a lightweight client into the dev server so you can click a component in the browser and capture a short context summary (props, state, source location and optional git diff). Output is written to a local .inspector folder.

Install

npm install -D ui-inspector

Optional helper to patch vite.config:

npx ui-inspector init

Quick start

1. Add uiInspector() to your Vite plugins or run the helper.
2. Start the dev server: npm run dev.
3. Press the shortcut (default ctrl+alt+i) in the browser and click a component to capture context.

Configuration example

uiInspector({
  outputDir: '.inspector',
  shortcut: 'ctrl+alt+i',
  includeGitDiff: true,
  redactPatterns: ['password', 'token', 'secret', 'apiKey']
})

Output

.inspector/ will contain context.md, context.json and a generated .gitignore.

Requirements

• Vite 4.x or later
• React (development mode only)

Notes

• The demo-project/ folder is for local testing only and is not included in the published npm package.
• All processing is local; no data is sent externally. Use redactPatterns to mask sensitive keys.
• Only works in development; completely removed from production builds.
• Enable source maps in your Vite config for accurate source locations.
• Supported browsers: Chrome, Firefox, Safari.
• If the inspector doesn't activate, check the console for errors and ensure you're in dev mode.

Contributing

Open issues or pull requests for contributions.

License: MIT