@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

Readme

Source

@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

Keywords

FAQs

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

Is @sveltejs/vite-plugin-svelte-inspector popular?

Is @sveltejs/vite-plugin-svelte-inspector well maintained?

Last updated on 10 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install