🚀 Boost Your Svelte DX: A Guide to the Vite Svelte Inspector

🛠️ The Setup ## 1. Basic Enable ## 2. Custom Configuration ## 💡 Pro Tip: Personalize with Environment Variables ## ⚙️ Configuration Reference ## Toggle & Display ## Navigation & Accessibility ## Styling ## 📝 Editor Support ## 🔗 Reference Ever found yourself staring at a UI element in your browser, wondering exactly which component file it lives in? If you are using Svelte with Vite, there is a powerful tool designed to solve exactly that. Meet @sveltejs/vite-plugin-svelte-inspector. This plugin adds a DOM inspector directly to your browser during development. When enabled, you can hover over an element to see its file path and click to automatically open your code editor at that exact location. Here is how to set it up and customize it to fit your workflow. First, ensure you have @sveltejs/vite-plugin-svelte installed (it's a peer dependency). The inspector is actually built into the Svelte config logic. You don't usually need to install a separate package if you are on a recent version of Svelte/Vite, but you do need to enable it. Open your svelte.config.js and simply set the inspector to true inside vitePlugin. If you want to change how you toggle the inspector or where the button sits, you can pass an object instead of a boolean. This is arguably the coolest feature. Inspector settings—like key combos—are often personal preferences. Your teammate might love Alt-x, but you might prefer Cmd-Shift. You shouldn't have to fight over the svelte.config.js file in Git. The inspector allows you to configure options via Environment Variables (shell or .env files). These take precedence over the config file! Here is a breakdown of the options you can tweak to make the inspector feel right for you. Tip: Use modifiers + key, like control-shift-o. showToggleButton ('always' | 'active' | 'never'): Controls the on-screen UI button. Default: 'active' (shows only when inspector is on). toggleButtonPos ('top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): Where the floating button appears. holdMode (boolean): If true, the inspector is only active while you hold down the toggle keys. If false, the keys act as a switch. You can navigate the DOM tree using your keyboard! prev: 'ArrowLeft' (previous sibling) openKey: Key to open the editor. escapeKeys: Keys to close the inspector. Default: ['Backspace', 'Escape'] The "Click-to-Open" magic relies on your editor being recognized. Standard editors (VS Code, WebStorm, etc.) are usually supported out of the box. However, if your editor isn't opening: Happy debugging! 🐛➡️✨ For the most up-to-date options and details, check out the official documentation on GitHub. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: // svelte.config.js export default { vitePlugin: { inspector: true } }; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // svelte.config.js export default { vitePlugin: { inspector: true } }; CODE_BLOCK: // svelte.config.js export default { vitePlugin: { inspector: true } }; CODE_BLOCK: // svelte.config.js export default { vitePlugin: { inspector: { toggleKeyCombo: 'alt-x', showToggleButton: 'always', toggleButtonPos: 'bottom-right' } } }; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // svelte.config.js export default { vitePlugin: { inspector: { toggleKeyCombo: 'alt-x', showToggleButton: 'always', toggleButtonPos: 'bottom-right' } } }; CODE_BLOCK: // svelte.config.js export default { vitePlugin: { inspector: { toggleKeyCombo: 'alt-x', showToggleButton: 'always', toggleButtonPos: 'bottom-right' } } }; COMMAND_BLOCK: # Set a custom key combo (unquoted string) SVELTE_INSPECTOR_TOGGLE=alt-x # Pass a full JSON options object SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}' # Disable it completely for your machine SVELTE_INSPECTOR_OPTIONS=false Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # Set a custom key combo (unquoted string) SVELTE_INSPECTOR_TOGGLE=alt-x # Pass a full JSON options object SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}' # Disable it completely for your machine SVELTE_INSPECTOR_OPTIONS=false COMMAND_BLOCK: # Set a custom key combo (unquoted string) SVELTE_INSPECTOR_TOGGLE=alt-x # Pass a full JSON options object SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}' # Disable it completely for your machine SVELTE_INSPECTOR_OPTIONS=false - toggleKeyCombo (string): The shortcut to turn the inspector on/off. - Default: 'alt-x' - Tip: Use modifiers + key, like control-shift-o. - showToggleButton ('always' | 'active' | 'never'): Controls the on-screen UI button. - Default: 'active' (shows only when inspector is on). - toggleButtonPos ('top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): Where the floating button appears. - Default: 'top-right' - holdMode (boolean): If true, the inspector is only active while you hold down the toggle keys. If false, the keys act as a switch. - Default: true - parent: 'ArrowUp' - child: 'ArrowDown' - next: 'ArrowRight' (next sibling) - prev: 'ArrowLeft' (previous sibling) - openKey: Key to open the editor. - Default: 'Enter' - escapeKeys: Keys to close the inspector. - Default: ['Backspace', 'Escape'] - customStyles (boolean): Defaults to true. This injects styles when active. - If you want to override the inspector's look, the body gets the class svelte-inspector-enabled, and the hovered element gets svelte-inspector-active-target. - Check the Supported Editors list. - Follow the Custom Editor instructions if yours is obscure or requires a specific binary path.