产品简介
svelte-devtools Svelte DevTools是一款浏览器扩展,专为Svelte框架开发者设计,允许在开发者工具中实时检查和编辑Svelte应用的组件层次结构和状态,解决调试过程中的可视化难题。

核心功能
- 在浏览器开发者工具中新增Svelte专用标签页
- 显示Svelte组件树、HTMLx块和DOM元素
- 允许检查和编辑选中组件的当前状态
- 支持Chrome和Firefox浏览器
- 需要Svelte v4.0.0以上版本和浏览器版本121或更高
快速开始
- 从Chrome Web Store或GitHub releases页面下载并安装Svelte DevTools扩展
- 在浏览器中打开开发者工具(按F12或右键检查)
- 在开发者工具中找到新出现的Svelte标签页并查看组件树
界面预览

与其他方案对比
| 对比项 | 本工具 | 同类商业软件 | 在线服务 |
|---|---|---|---|
| 费用 | 开源免费 | 通常收费或含广告 | 可能有订阅或上传限制 |
| 隐私 | 本地运行,数据自持 | 依赖厂商政策 | 需上传数据到服务器 |
| 可定制性 | 源码开放,社区活跃 | 受限于官方功能 | 功能固定 |
适合谁用
- 正在开发Svelte应用程序的前端开发者
- 需要调试Svelte组件状态和层次的开发人员
- 使用Svelte框架构建Web应用的团队
下载与版本
当前最新版本为 v2.2.2,发布于 2024-05-29。支持 多平台。点击页面「下载软件」按钮即可下载打包好的版本,根据你的电脑/手机系统来选择对应的软件。
注意事项
- 本工具仅供学习和研究使用,请遵守相关法律法规。
- 请尊重内容创作者版权,勿将下载内容用于商业或非法传播。
- 项目源码地址:https://github.com/sveltejs/svelte-devtools