@sveltejs/vite-plugin-svelte-inspector

What is @sveltejs/vite-plugin-svelte-inspector?

@sveltejs/vite-plugin-svelte-inspector is a Vite plugin that provides an inspector for Svelte components. It allows developers to inspect and debug Svelte components directly within the browser, making it easier to understand component structure, state, and props.

What are @sveltejs/vite-plugin-svelte-inspector's main functionalities?

Component Inspection

This feature allows you to inspect Svelte components directly in the browser. By integrating the svelteInspector plugin into your Vite configuration, you can click on components in the browser to see their state, props, and other details.

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';

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

State and Props Debugging

This feature enables detailed debugging of component state and props. By configuring the svelteInspector plugin with options like showState and showProps, you can view the current state and props of any Svelte component in your application.

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';

export default defineConfig({
  plugins: [
    svelte(),
    svelteInspector({
      showState: true,
      showProps: true
    })
  ]
});

Other packages similar to @sveltejs/vite-plugin-svelte-inspector

react-devtools

react-devtools is a set of tools for inspecting the React component hierarchy in the browser. It provides similar functionality to @sveltejs/vite-plugin-svelte-inspector but is specifically designed for React applications. It allows developers to inspect component trees, view state and props, and debug React components.

vue-devtools

vue-devtools is a browser extension for debugging Vue.js applications. It offers features similar to @sveltejs/vite-plugin-svelte-inspector, such as inspecting component trees, viewing state and props, and debugging Vue components. It is tailored for Vue.js applications and provides a comprehensive set of tools for Vue developers.

README

@sveltejs/vite-plugin-svelte-inspector

A Svelte inspector plugin for Vite.

Usage

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';

export default defineConfig({
  plugins: [
    // the svelte plugin is required to work
    svelte(),
    svelteInspector({
      /* plugin options */
    })
  ]
});

License

MIT