devtools
@nuxt/devtools

可视化的工具,帮助您更好地了解您的 Nuxt 应用程序。

Nuxt DevTools

Nuxt DevTools

npm versionnpm downloadsLicenseNuxtVolta

释放 Nuxt 开发体验。
Nuxt DevTools 是一套可视化工具,旨在帮助你更好地了解你的应用程序。

👋 介绍 | 💡 想法与建议 | 🗺️ 项目路线图 | 📚 文档

!注意 你当前处于用于 v4 开发的 main 分支。最新的稳定分支是 v3


安装

Nuxt DevTools v2 需要 Nuxt v3.15.0 或更高版本

Nuxt DevTools 在 Nuxt v3.8.0 中默认启用。你可以在应用程序中按下 Shift + Alt / ⇧ Shift + ⌥ Option + D 来打开它。

如果你想显式启用或禁用 Nuxt DevTools,可以在你的 nuxt.config 中进行配置:

export default defineNuxtConfig({
  devtools: {
    enabled: true // or false to disable
  }
})

夜间发布渠道

Nuxt 的夜间构建频道类似,DevTools 也提供夜间构建频道,该频道会自动发布针对 main 分支的每一次提交。

你可以通过运行以下命令加入夜间构建频道:

{
  "devDependencies": {
--    "@nuxt/devtools": "^0.1.0"
++    "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
  }
}

删除锁文件(package-lock.jsonyarn.lockpnpm-lock.yaml)并重新安装依赖。

模块选项

要配置 Nuxt DevTools,你可以传入 devtools 选项。

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: {
    // Enable devtools (default: true)
    enabled: true,
    // VS Code Server options
    vscode: {},
    // ...other options
  }
})

有关所有可用选项,请参阅 IDE 中的 TSDocs,或查看 类型定义文件

功能

阅读 公告博客文章 🎊,了解我们构建 Nuxt DevTools 的原因及其功能!

模块作者

请参考 模块作者指南

贡献指南

请参考 贡献指南

匿名使用分析

Nuxt DevTools 会收集有关一般用途的匿名遥测数据。这有助于我们准确评估所有用户对功能的使用和定制情况。这些数据将使我们更好地了解 Nuxt DevTools 中每个功能的使用方式,衡量所做的改进(开发体验和性能)及其相关性。它还将帮助我们确定工作优先级,并专注于对用户最重要的功能。

Nuxt DevTools 的遥测数据通过 Nuxt Telemetry 传输,这意味着 Nuxt DevTools 将尊重你的本地和全局 Nuxt Telemetry 设置。你也可以在 Nuxt DevTools 设置中选择退出 Nuxt DevTools 的遥测。

我们收集的数据是完全匿名的,无法追溯到来源(使用 hash+seed),并且仅在聚合形式下才有意义。我们收集的任何数据均不包含个人身份信息,也无法追踪到个人。

事件

除了 默认的 Nuxt Telemetry 事件外,Nuxt DevTools 还收集以下事件:

  • Nuxt DevTools 的版本
  • 选项卡/功能之间的导航
    • 这有助于我们了解哪些功能使用率最高,从而确定我们的工作优先级。
  • 浏览器和操作系统名称及版本
    • 这有助于我们提高跨不同浏览器和操作系统的兼容性。
  • 某些操作按钮的点击事件

许可证

MIT