Web Component Dev Tools

Comprehensive developer tools for inspecting, debugging, and monitoring web components

✨ Features

• View attributes, properties, public methods, slots, css variables, nested components.
• Show overlay of components on the page.
• Monitor events and viewing custom event detail objects.
• Check for accessibility issues.
• Check for component re-renders.

📦 Packages

Package	Description	Version
@cadamsdev/vite-plugin-wc-devtools	Vite plugin
@cadamsdev/webpack-plugin-wc-devtools	Webpack plugin
@cadamsdev/wc-devtools-client	Client-side script

📸 Screenshots

Click to view screenshots

View Component Details

View Nested Components

Overlays

Highlight Component

Log Element to Console

Monitor Events

Scroll to Element

Shadow DOM Indicator, Overlay and Badge

View Accessibility Issues

View Re-renders

❤️ Sponsors

Support development by becoming a sponsor! Your avatar or company logo will appear below.

Become a Sponsor

🚀 Quick Start

Vite

npm install @cadamsdev/vite-plugin-wc-devtools --save-dev

// vite.config.ts
import { defineConfig } from 'vite';
import { webComponentDevTools } from '@cadamsdev/vite-plugin-wc-devtools';

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

Webpack

npm install @cadamsdev/webpack-plugin-wc-devtools --save-dev

// webpack.config.js
import { WebpackWebComponentDevTools } from '@cadamsdev/webpack-plugin-wc-devtools';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new WebpackWebComponentDevTools()
  ]
};

📄 License

MIT