vite-plugin-component-debugger

A Vite plugin that automatically adds data attributes to your JSX and TSX elements during development, making it easy to identify which component rendered each part of the DOM. This is especially useful when debugging unfamiliar code or components generated by AI tools that you haven't yet reviewed in detail.

The plugin offers extensive customization options including path filtering with glob patterns, attribute transformers for privacy, preset configurations for different workflows, conditional tagging callbacks, custom attributes, and metadata encoding in JSON, Base64, or plain text formats. All features are opt-in, so existing configurations continue to work without modification.