Vite Plugin Component Debugger - Apps & Tools | Tonye Brown - Creative Front-End Developer & Designer

Project Overview

Vite Plugin Component Debugger is a game-changing development tool that automatically adds data attributes to your JSX/TSX elements during development. Say goodbye to the frustrating hunt through component trees - instantly identify which React component rendered any DOM element.

Ever found yourself frantically clicking "Inspect Element" trying to figure out which of your 47 Button components rendered that specific button? This plugin solves that problem once and for all. Using efficient AST transformation, it adds rich metadata to every component without impacting performance.

Inspired by lovable-tagger↗, this plugin brings enhanced debugging capabilities to the Vite ecosystem with features specifically designed for React development workflows.

Technologies Used

ViteTypeScriptBabel ParserESTree WalkerMagic StringAST TransformationSource MapsReactJSX/TSXHot Module Replacement

Key Features & Capabilities

🚀🚀 Blazing Fast (v2.2)

15-30% faster with pre-compiled glob patterns (5-10x speedup) and optimized JSON serialization (2-3x speedup).

🏷️🏷️ Automatic Tagging

Automatically adds data attributes to JSX/TSX elements with detailed component information during development.

📍📍 Location Tracking

Includes file path, line number, and column for each component, making debugging surgical and precise.

🎨🎨 Presets & Transformers

Quick configs (minimal, testing, debugging, production) and custom attribute transformers for privacy/formatting.

🎯🎯 Advanced Filtering

Path filtering (glob patterns), conditional tagging (shouldTag), depth control, and custom attributes support.

🔧🔧 Modular Architecture

Clean 7-file structure (was 1,103 lines). Maintainable, testable, and production-ready.

#Installation & Setup

Getting started takes literally 30 seconds:

Bash

pnpm add -D vite-plugin-component-debugger

Vite.config.ts.

TypeScript

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import componentDebugger from "vite-plugin-component-debugger";

export default defineConfig({
  plugins: [
    componentDebugger({
      enabled: process.env.NODE_ENV === "development",
    }),
    react(),
  ],
});

#What Gets Added

Your components automatically receive rich metadata:

Your component. What appears in the DOM (development only).

JSX

// Your component

<Button onClick={handleClick}>Click me</Button>

// What appears in the DOM (development only)

<button

data-dev-id="src/components/Button.tsx:10:2"

data-dev-name="button"

data-dev-path="src/components/Button.tsx"

data-dev-line="10"

data-dev-file="Button.tsx"

data-dev-component="button"

data-dev-metadata="{'onClick':'function','text':'Click me'}"

onClick={handleClick}

Click me

</button>

#Real-World Use Cases

#🔍 Development Debugging

Quickly identify which component rendered which element:

Find all Button components in the DOM.

JavaScript

// Find all Button components in the DOM
document.querySelectorAll('[data-dev-component="Button"]').forEach((el) => {
  console.log(`Button at ${el.dataset.devPath}:${el.dataset.devLine}`);
});

#🧪 E2E Testing

Make your tests bulletproof with stable selectors:

Cypress example. Playwright example.

JavaScript

// Cypress example
cy.get('[data-dev-component="SubmitButton"]').click();
cy.get('[data-dev-path*="LoginForm"]').should("be.visible");

// Playwright example
await page.click('[data-dev-component="LoginButton"]');
await expect(page.locator('[data-dev-path*="Dashboard"]')).toBeVisible();

#📊 Performance Monitoring

Track exactly which components are rendering:

Send to analytics, performance monitoring, etc.

JavaScript

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.dataset?.devId) {
        console.log(`Component rendered: ${node.dataset.devId}`);
        // Send to analytics, performance monitoring, etc.
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });

#🎨 Visual Debugging Tools

Build custom debugging overlays:

Show component boundaries on hover. Create a component map.

JavaScript

// Show component boundaries on hover

document.addEventListener("mouseover", (e) => {

if (e.target.dataset?.devComponent) {

e.target.style.outline = "2px solid red";

console.log(`Component: ${e.target.dataset.devComponent}`);

console.log(`Location: ${e.target.dataset.devPath}:${e.target.dataset.devLine}`);

}

});

// Create a component map

const componentMap = new Map();

document.querySelectorAll("[data-dev-id]").forEach((el) => {

const path = el.dataset.devPath;

if (!componentMap.has(path)) {

componentMap.set(path, []);

}

componentMap.get(path).push(el);

});

console.log("Component distribution:", componentMap);

#Configuration Options

The plugin is designed to work out of the box, but offers extensive customization:

Enable/disable (default: true). File extensions to process (default: ['.jsx', '.tsx']). Attribute prefix (default: 'data-dev').

TypeScript

componentDebugger({

// Enable/disable (default: true)

enabled: process.env.NODE_ENV === "development",

// File extensions to process (default: ['.jsx', '.tsx'])

extensions: [".jsx", ".tsx"],

// Attribute prefix (default: 'data-dev')

attributePrefix: "data-debug",

// Elements to exclude (default: ['Fragment', 'React.Fragment'])

excludeElements: ["Fragment", "React.Fragment"],

// Include component props (default: true)

includeProps: true,

// Include text content (default: true)

includeContent: true,

// Custom elements to exclude (Three.js excluded by default)

customExcludes: new Set(["mesh", "group", "camera"]),

});

#Technical Architecture

Under the hood, the plugin uses a sophisticated AST transformation pipeline:

Intercepts Vite's transform hook for .jsx/.tsx files
Parses JSX/TSX with Babel parser into an Abstract Syntax Tree
Walks the AST with estree-walker to find JSX elements efficiently
Adds data attributes using magic-string for zero-impact code modification
Preserves source maps so debugging stays accurate

The entire process adds milliseconds to your build time while providing hours of debugging value.

#Performance Impact

#⚡ v2.2.0 Performance Optimizations

15-30% faster than v2.1 with three micro-optimizations:

Pre-compiled Glob Patterns - 5-10x faster path matching using minimatch.makeRe()
Optimized JSON Serialization - 2-3x faster metadata encoding (single stringify)
Smart String Operations - 2x faster debug logging (single split)

Time Savings:

100-file projects: Save 200-500ms
1000-file projects: Save 2-5 seconds

#General Performance

Build time: Adds ~50-200ms to initial build (down from ~200-300ms in v2.1)
HMR: Virtually no impact on hot reload performance
Runtime: Zero runtime overhead - attributes are static strings
Bundle size: No additional JavaScript shipped to production

#Build Statistics

The plugin provides build statistics in the console:

TEXT

📊 Component Debugger Statistics:
   Total files scanned: 45
   Files processed: 32
   Elements tagged: 287

#Why This Plugin?

#Before This Plugin 😫

Clicking through React DevTools trying to find components
Adding console.log("HERE 1"), console.log("HERE 2") everywhere
Guessing which component rendered what
Brittle CSS selectors in tests
No way to track component rendering patterns

#After This Plugin 😊

Instant component identification in browser DevTools
Stable test selectors that won't break
Performance debugging becomes surgical
Onboard new developers faster
Debug production issues by recreating locally

#Browser Compatibility

Works in all modern browsers that support data attributes (so... all of them):

Chrome/Edge 12+
Firefox 6+
Safari 5.1+
Opera 11.5+

#Framework Support

Currently optimized for React with Vite. Coming soon:

Vue support
Svelte support
Solid support
Preact support

#Roadmap

🔄 React DevTools integration - See metadata directly in React DevTools
📱 React Native support - Debug mobile apps with the same power
🎨 Browser extension - Visual overlay for component boundaries
📊 Analytics dashboard - Track component usage patterns
🤖 AI debugging assistant - Get debugging suggestions based on patterns

#Support This Project

If this plugin saves you debugging time, consider supporting its development:

⭐ Star on GitHub↗
☕ Buy me a coffee↗
💝 Sponsor on GitHub↗
📢 Share with your team

#Get Started

Ready to debug React components like a pro?

Bash

pnpm add -D vite-plugin-component-debugger

Then add to your vite.config.ts and start debugging with superpowers! 🚀

View on NPM

↗

GitHub Repository

↗