Inspect the intermediate state of Vite plugins during development and build processes
—
Configuration options for controlling vite-plugin-inspect behavior, filtering, and output settings.
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
})
],
});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;
}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/**"]
})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:
/__inspect/Enable inspection during build with static report generation.
Inspect({
dev: false,
build: true,
outputDir: '.vite-inspect',
open: true
})Features available in build mode:
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\./]
})Configure how version queries in module URLs are handled.
Inspect({
removeVersionQuery: true // Default: treat file.js?v=123 same as file.js
})Set custom base URL for the inspector interface.
Inspect({
base: '/my-app/', // Inspector available at /my-app/__inspect/
})Control console output visibility.
Inspect({
silent: true // Suppress URL and status messages
})Automatically open inspector in browser on startup.
Inspect({
open: true, // Auto-open inspector page
dev: true // Only works in dev 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