<p align="center">

<img src="https://ikun-ui.netlify.app/logo.svg" width="180" height="180"/>

</p>

<h1 align="center">

ikun-svelte-devtools

</h1>

<p align="center">

🍨 A vite plugin that improves the svelte development experience

</p>


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


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


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


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


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


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


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 module can open a color picker

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

Or

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

Or

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

import { sveltekit } from '@sveltejs/kit/vite';

import { defineConfig } from 'vite';

import svelteDevtools from '@ikun-svelte-devtools/server';

export default defineConfig({

plugins: [

svelteDevtools({

sveltekit: sveltekit()

}),

],

});

- [svelte](https://github.com/sveltejs/svelte)

- [unocss](https://github.com/nuxt/devtools)

- [vite-plugin-vue-devtools](https://github.com/webfansplz/vite-plugin-vue-devtools)

"description": "\uD83C\uDF68 A vite plugin that improves the svelte development experience",

"description": "\uD83C\uDF68 A vite plugin that improves the svelte development experience",

"keywords": [

"vue-devtools",

"vite-plugin",

"vite-plugin-vue-devtools",

"svelte-devtools",

"vite-plugin-svelte-devtools",

"dx"

],