Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/angry-dolls-cut.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/vite-plugin-svelte-inspector': patch
---

docs: update usage instructions in readme and link to docs
28 changes: 14 additions & 14 deletions packages/vite-plugin-svelte-inspector/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Loading