diff --git a/.changeset/angry-dolls-cut.md b/.changeset/angry-dolls-cut.md new file mode 100644 index 000000000..ebfb780ae --- /dev/null +++ b/.changeset/angry-dolls-cut.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte-inspector': patch +--- + +docs: update usage instructions in readme and link to docs diff --git a/packages/vite-plugin-svelte-inspector/README.md b/packages/vite-plugin-svelte-inspector/README.md index bbdf50c80..14dfbbbb6 100644 --- a/packages/vite-plugin-svelte-inspector/README.md +++ b/packages/vite-plugin-svelte-inspector/README.md @@ -4,23 +4,23 @@ A [Svelte](https://svelte.dev) inspector plugin for [Vite](https://vitejs.dev). ## Usage +This plugin is automatically installed as a dependency of [@sveltejs/vite-plugin-svelte](https://www.npmjs.com/package/@sveltejs/vite-plugin-svelte). + +You can enable it in `svelte.config.js` by adding the `vitePlugin.inspector` option. + ```js -// 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 */ - }) - ] -}); +// svelte.config.js +export default { + vitePlugin: { + inspector: true + } +}; ``` +Now simply press `alt-x` (`option-x` on MacOS) on a page served by the Vite dev server to activate inspect mode. Click on a highlighted element to jump to its source code in your editor. + +Also check out the [docs](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md) for customization options. + ## License [MIT](./LICENSE)