ikun-svelte-devtools

🍨 A vite plugin that improves the svelte development experience

Features

page

In the pages module, you can quickly understand which pages the project contains

Routes

In the Routes module, you can quickly understand the routing information of the project

Assets

In the Assets module, you can quickly understand the static resources of the project, including pictures, fonts, etc.

Search Packages

In the Search Packages module you can search for dependencies and install or uninstall them

Inspect

In the Inspect module you can view the compiled code, It comes from vite-plugin-inspect support.

Graph

In the Graph module, you can quickly understand the reference relationship between js and sfc through visualization

Inspector

In the Inspector module, you can click on an element on the page to open the corresponding source code in the IDE. It comes from svelte-kit-inspector support.

EyeDropper

EyeDropper module can open a color picker

Install

npm i @ikun-svelte-devtools/server -D

Or

yarn add @ikun-svelte-devtools/server -D

Or

pnpm add @ikun-svelte-devtools/server -D

Usage

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import svelteDevtools from '@ikun-svelte-devtools/server';
export default defineConfig({
    plugins: [
        svelteDevtools({
            sveltekit: sveltekit()
        })
    ]
});

Thanks

• svelte
• unocss
• vite-plugin-vue-devtools