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

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.

🛠️ The Setup

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.

1. Basic Enable

Open your svelte.config.js and simply set the inspector to true inside vitePlugin.

// svelte.config.js
export default {
  vitePlugin: {
    inspector: true
  }
};

2. Custom Configuration

If you want to change how you toggle the inspector or where the button sits, you can pass an object instead of a boolean.

// svelte.config.js
export default {
  vitePlugin: {
    inspector: {
      toggleKeyCombo: 'alt-x',
      showToggleButton: 'always',
      toggleButtonPos: 'bottom-right'
    }
  }
};

💡 Pro Tip: Personalize with Environment Variables

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!

# 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

⚙️ Configuration Reference

Here is a breakdown of the options you can tweak to make the inspector feel right for you.

Toggle & Display

• 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

Navigation & Accessibility

You can navigate the DOM tree using your keyboard!

• navKeys:
• 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']

Styling

• 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.

📝 Editor Support

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:

1. Check the Supported Editors list.
2. Follow the Custom Editor instructions if yours is obscure or requires a specific binary path.

Happy debugging! 🐛➡️✨

🔗 Reference

For the most up-to-date options and details, check out the official documentation on GitHub.