Source: Dev.to

提升你的 Svelte 开发体验（DX）：Vite Svelte Inspector 使用指南

在日常的 Svelte 开发中，调试组件结构和状态往往需要手动在浏览器中查找对应的 DOM，过程繁琐且容易出错。Vite 官方提供的 Svelte Inspector 插件可以让我们像使用 React DevTools 那样直接在浏览器面板中查看、定位和编辑 Svelte 组件，大幅提升开发效率。

本文将手把手教你如何在 Vite 项目中集成并使用 Svelte Inspector，帮助你快速定位问题、实时预览更改以及更好地理解组件树。

---

目录

1. 为什么需要 Svelte Inspector？
2. 安装与配置
3. 基本使用方法
4. 进阶技巧
5. 常见问题排查
6. 结语

---

为什么需要 Svelte Inspector？

• 可视化组件树：直接在浏览器 DevTools 中看到组件的层级结构，省去在代码中手动搜索的时间。
• 即时编辑 Props / State：在面板中修改组件的 props、stores 或局部状态，实时看到 UI 变化。
• 快速定位源码：点击面板中的组件即可在编辑器（VS Code、WebStorm 等）中打开对应的 .svelte 文件并定位到具体行。
• 兼容 Vite：作为 Vite 官方插件，安装简单、与热更新（HMR）无缝配合。

---

安装与配置

1. 创建或打开一个 Vite + Svelte 项目

如果还没有项目，可以使用官方模板快速初始化：

npm create vite@latest my-svelte-app -- --template svelte
cd my-svelte-app
npm install

2. 安装 @sveltejs/vite-plugin-svelte（如果尚未安装）

npm i -D @sveltejs/vite-plugin-svelte

注意：从 Vite 4.x 开始，Svelte 官方插件已经内置了 Inspector 功能，只需要在插件选项中开启即可。

3. 在 vite.config.js 中启用 Inspector

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      // 开启 inspector
      inspector: true,
      // 可选：自定义快捷键（默认是 Ctrl+Shift+I / Cmd+Shift+I）
      // inspector: {
      //   toggleKeyCombo: 'ctrl+shift+i'
      // }
    })
  ]
});

4. 启动开发服务器

npm run dev

打开浏览器后，按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Shift+I（macOS）即可弹出 Svelte Inspector 面板。

---

基本使用方法

1. 查看组件树

• 面板左侧展示当前页面的组件层级结构。点击任意节点会在右侧高亮对应的 DOM，并在编辑器中打开对应的 .svelte 文件（需要配合 VS Code 的 vscode:// 链接或使用 svelte-language-server）。

2. 实时编辑 Props

• 选中组件后，右侧会显示该组件的 props 列表。直接在输入框中修改数值后，页面会立即更新，帮助你快速验证 UI 变化。

3. 调试 Stores

• 如果组件使用了 Svelte store，Inspector 会自动检测并展示当前 store 的值。你可以直接在面板中修改，观察响应式更新效果。

4. 高亮对应的 DOM

• 当你在面板中选中某个组件时，页面会在对应的 DOM 元素上添加临时的蓝色轮廓（outline），帮助你快速定位渲染位置。

---

进阶技巧

---

常见问题排查

1. Inspector 面板不弹出

   • 确认 svelte({ inspector: true }) 已在 vite.config.js 中正确配置。
   • 检查浏览器控制台是否有插件冲突的报错，尤其是与其他 DevTools 扩展（如 React DevTools）共存时。

2. 点击组件后没有在编辑器中打开文件

   • 需要在 VS Code 中安装 Svelte for VS Code 扩展，并确保 settings.json 中的 svelte.enableInspector 为 true。
   • 若使用其他编辑器，请参考对应插件的 “打开文件” 功能实现方式。

3. 修改 Props 后页面没有刷新

   • 确认组件的 export let 声明是响应式的；如果使用了 let 但未 export，Inspector 无法捕获。
   • 检查是否在 svelte.config.js 中意外关闭了 HMR（hot: false）。

4. 在生产环境仍然看到 Inspector

   • Inspector 只在 dev 模式下启用。确保 npm run build 后的产物不包含 inspector 代码；如果仍然出现，请检查 vite.config.js 中的 mode 条件是否写对。

---

结语

Vite 的 Svelte Inspector 为 Svelte 开发者提供了类似 React DevTools 的强大调试体验，让我们可以在浏览器中直观看到组件树、实时编辑状态并快速定位源码。只需几行配置，就能把繁琐的手动查找过程变成“一键定位”，显著提升开发效率。

如果你对本文有任何疑问或想分享自己的使用技巧，欢迎在评论区留言。祝你玩得开心，写出更高质量的 Svelte 应用！

介绍

你是否曾经盯着浏览器中的 UI 元素，想知道它到底属于哪个组件文件？
如果你在使用 Svelte 与 Vite，有一个专门为此设计的强大工具：@sveltejs/vite-plugin-svelte-inspector。
该插件在开发期间直接在浏览器中添加了 DOM 检查器。启用后，你可以将鼠标悬停在元素上查看其文件路径，点击后会自动在代码编辑器中打开对应位置。

设置

1. 确保已安装 @sveltejs/vite-plugin-svelte（它是一个 peer 依赖）。
2. 检查器已内置在 Svelte 配置逻辑中，所以如果你使用的是较新版本的 Svelte/Vite，通常不需要单独的包——只需启用它。

基本启用

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

自定义配置

如果你想更改检查器的切换方式或按钮的位置，请传入对象而不是布尔值：

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

环境变量

选项也可以通过环境变量（shell 或 .env 文件）进行设置。这些设置的优先级高于配置文件。

# 设置自定义键组合（未加引号的字符串）
SVELTE_INSPECTOR_TOGGLE=alt-x

# 传入完整的 JSON 选项对象
SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}'

# 完全禁用该功能（针对你的机器）
SVELTE_INSPECTOR_OPTIONS=false

可用选项

导航与可访问性

您可以使用键盘在 DOM 树中导航：

• 父节点：ArrowUp
• 子节点：ArrowDown
• 下一个兄弟节点：ArrowRight
• 上一个兄弟节点：ArrowLeft

按 Enter 打开编辑器，按 Backspace 或 Escape 关闭检查器。

样式

当启用 customStyles 时，插件会注入一个最小的样式表。如果你想自行设置样式：

• “ 会获得类 svelte-inspector-enabled。
• 被悬停的元素会获得类 svelte-inspector-active-target。

你可以在自己的 CSS 中针对这些类来自定义颜色、边框等。

编辑器集成

“点击打开”功能依赖于识别您的编辑器。VS Code、WebStorm 等标准编辑器开箱即支持。如果您的编辑器未打开：

1. 在插件的 README 中检查 Supported Editors 列表。
2. 按照 Custom Editor 指南配置特定的二进制路径或命令。

结论

调试愉快！ 🐛➡️✨
有关最新的选项和细节，请参阅 GitHub 上的官方文档。