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

Source: Dev.to

Introduction

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: @sveltejs/vite-plugin-svelte-inspector.
The 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.

Setup

1. Ensure you have @sveltejs/vite-plugin-svelte installed (it’s a peer dependency).
2. The inspector is built into the Svelte config logic, so you usually don’t need a separate package if you are on a recent version of Svelte/Vite—just enable it.

Basic enablement

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

Custom configuration

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

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

Environment Variables

Options can also be set 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

Available Options

Navigation & Accessibility

You can navigate the DOM tree using your keyboard:

• Parent: ArrowUp
• Child: ArrowDown
• Next sibling: ArrowRight
• Previous sibling: ArrowLeft

Press Enter to open the editor, and Backspace or Escape to close the inspector.

Styling

When customStyles is enabled, the plugin injects a minimal stylesheet. If you prefer to style it yourself:

• The “ receives the class svelte-inspector-enabled.
• The hovered element receives the class svelte-inspector-active-target.

You can target these classes in your own CSS to customize colors, borders, etc.

Editor Integration

The “click‑to‑open” feature relies on your editor being recognized. Standard editors such as VS Code, WebStorm, and others are supported out of the box. If your editor isn’t opening:

1. Check the Supported Editors list in the plugin’s README.
2. Follow the Custom Editor instructions to configure a specific binary path or command.

Conclusion

Happy debugging! 🐛➡️✨
For the most up‑to‑date options and details, refer to the official documentation on GitHub.