CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vite-plugin-inspect

Inspect the intermediate state of Vite plugins during development and build processes

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration

Configuration options for controlling vite-plugin-inspect behavior, filtering, and output settings.

Capabilities

Main Plugin Function

Creates a configured Vite plugin instance with inspection capabilities.

/**
 * Creates a Vite plugin for inspecting plugin transformations
 * @param options - Configuration options for the plugin
 * @returns Configured Vite plugin instance
 */
function Inspect(options?: ViteInspectOptions): Plugin;

Usage Examples:

import { defineConfig } from 'vite';
import Inspect from 'vite-plugin-inspect';

// Basic usage with defaults
export default defineConfig({
  plugins: [
    Inspect()
  ],
});

// Development-only inspection
export default defineConfig({
  plugins: [
    Inspect({
      dev: true,
      build: false,
      silent: false
    })
  ],
});

// Build inspection with custom output
export default defineConfig({
  plugins: [
    Inspect({
      dev: false,
      build: true,
      outputDir: '.vite-inspect-build',
      open: true
    })
  ],
});

Configuration Interface

Complete configuration options interface for the plugin.

interface ViteInspectOptions {
  /** Enable the inspect plugin in dev mode (could be some performance overhead) @default true */
  dev?: boolean;
  /** Enable the inspect plugin in build mode, and output the report to `.vite-inspect` @default false */
  build?: boolean;
  /** @deprecated use `dev` or `build` option instead. */
  enabled?: boolean;
  /** Directory for build inspector UI output, only work in build mode @default '.vite-inspect' */
  outputDir?: string;
  /** Filter for modules to be inspected */
  include?: FilterPattern;
  /** Filter for modules to not be inspected */
  exclude?: FilterPattern;
  /** Base URL for inspector UI @default read from Vite's config */
  base?: string;
  /** Print URL output silently in the terminal @default false */
  silent?: boolean;
  /** Automatically open inspect page @default false */  
  open?: boolean;
  /** Remove version query `?v=xxx` and treat them as the same module @default true */
  removeVersionQuery?: boolean;
  /** Enable embedded mode @default false */
  embedded?: boolean;
}

Filter Pattern Type

Type definition for include/exclude filtering patterns.

/**
 * Pattern type for filtering modules by path or name
 * Can be string, regex, array of patterns, or null to disable filtering
 */
type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null;

Usage Examples:

// String patterns
Inspect({
  include: "src/**/*.vue",
  exclude: "node_modules/**"
})

// Regex patterns  
Inspect({
  include: /\.(vue|tsx?)$/,
  exclude: /node_modules/
})

// Multiple patterns
Inspect({
  include: ["src/**/*.vue", "src/**/*.ts"],
  exclude: ["node_modules/**", "dist/**"]
})

Mode Configuration

Development Mode

Enable inspection during development with real-time updates.

Inspect({
  dev: true,        // Enable in dev mode
  build: false,     // Disable in build mode  
  silent: false,    // Show console messages
  open: false       // Don't auto-open browser
})

Features available in dev mode:

  • Real-time module transformation tracking
  • WebSocket-based updates
  • Interactive web interface at /__inspect/
  • Middleware performance monitoring

Build Mode

Enable inspection during build with static report generation.

Inspect({
  dev: false,
  build: true,
  outputDir: '.vite-inspect',
  open: true
})

Features available in build mode:

  • Static HTML report generation
  • Complete build-time transformation analysis
  • Offline inspection capability
  • Automatic browser opening (optional)

Filtering Options

Include/Exclude Patterns

Control which modules are inspected using glob patterns or regular expressions.

// Include only Vue and TypeScript files
Inspect({
  include: ["**/*.vue", "**/*.ts", "**/*.tsx"]
})

// Exclude node_modules and test files
Inspect({
  exclude: ["node_modules/**", "**/*.test.ts", "**/*.spec.ts"]
})

// Complex filtering
Inspect({
  include: /src\//,
  exclude: [/node_modules/, /\.test\./, /\.spec\./]
})

Version Query Handling

Configure how version queries in module URLs are handled.

Inspect({
  removeVersionQuery: true  // Default: treat file.js?v=123 same as file.js
})

UI Configuration

Base URL Configuration

Set custom base URL for the inspector interface.

Inspect({
  base: '/my-app/',  // Inspector available at /my-app/__inspect/
})

Silent Mode

Control console output visibility.

Inspect({
  silent: true  // Suppress URL and status messages
})

Auto-open Browser

Automatically open inspector in browser on startup.

Inspect({
  open: true,  // Auto-open inspector page
  dev: true    // Only works in dev mode
})

Embedded Mode

Enable embedded mode for integration with other tools.

Inspect({
  embedded: true  // Enable embedded mode
})

Install with Tessl CLI

npx tessl i tessl/npm-vite-plugin-inspect

docs

configuration.md

index.md

module-inspection.md

nuxt-integration.md

performance-metrics.md

programmatic-api.md

tile.json