功能

您可以在我们的 路线图 中了解更多信息。

概述

显示应用程序的快速概述，包括 Nuxt 版本（如果版本过旧，您可以轻松更新）、Vue 版本、页面、组件、导入、模块和插件，以及应用程序的加载时间等！

页面

页面选项卡显示您当前的路由，并提供一些有用的信息，例如布局或中间件，并提供在页面之间快速导航的方式。您还可以使用文本框查看每个路由的匹配方式。

组件

组件选项卡显示您在应用程序中使用的所有组件及其来源。您还可以搜索它们并转到源代码。

组件选项卡还具有一个可以切换的图形视图。图形视图还显示组件之间的关系，并了解每个组件的依赖关系。

您还可以检查应用程序的 DOM 树，并查看哪个组件正在渲染它。查找更改位置变得更加容易。

导入

导入选项卡显示注册到 Nuxt 的所有自动导入。您可以查看哪些文件正在导入它们，以及它们来自哪里。某些条目还可以提供简短的描述和文档链接。

模块

模块选项卡显示您已安装的所有模块及其信息，例如模块的 GitHub 存储库、文档、版本等。

您可以一键安装甚至删除任何 Nuxt 模块！

资产

资产选项卡显示您来自 Public 目录的文件，您可以查看所选文件的相关信息，并提供一些有用的操作。

您还可以使用拖放功能上传文件。

终端

终端选项卡显示活动终端进程。

运行时配置

运行时配置选项卡显示项目的所有运行时配置，并提供编辑它们的选项。

有效载荷

有效载荷选项卡显示项目的所有状态和数据有效载荷。

构建分析

在构建分析选项卡中，您可以运行分析构建并查看项目的捆绑包大小。它保存报告，以便您可以比较不同构建中的捆绑包大小。

打开图形

Open Graph 选项卡旨在帮助您进行 SEO，它会为您页面显示 Twitter、Facebook 和 LinkedIn 的社交预览卡片。它还提供缺失的 SEO 标签，并允许您复制代码片段。

插件

插件选项卡显示项目正在使用的所有插件，以及一些信息，例如插件的初始化时间。

服务器路由

服务器路由选项卡显示项目中的所有 Nitro 路由。它提供了一个游乐场，用于发送和测试您的端点。

存储

存储选项卡显示项目中的所有 Nitro 存储。您可以创建、编辑和删除文件。

了解更多关于 Nitro 存储

VS Code 服务器

Nuxt DevTools 中的 VS Code 服务器集成通过将 Visual Studio Code 的强大功能直接引入您的浏览器来增强您的开发体验。使用此功能，您可以使用熟悉的 VS Code 界面无缝地编辑和调试您的 Nuxt 项目。

要开始使用 VS Code 服务器，请按照 Code Server 安装指南 中提供的安装说明进行操作。

有关 VS Code 服务器的优势和功能的更多信息，请参阅 官方 Visual Studio Code 博客

钩子

钩子选项卡可以帮助您监控每个钩子花费的时间。这有助于查找性能瓶颈。

虚拟文件

虚拟文件选项卡显示 Nuxt 生成的虚拟文件，以支持约定。

检查

检查公开 vite-plugin-inspect 集成，允许您检查 Vite 的转换步骤。

设置

设置选项卡允许您根据需要配置 DevTools。您可以隐藏选项卡、更改选项卡顺序、缩放、主题等等。

Nuxt 图标

Nuxt 图标是侧边栏上的第一个项目，位于 DevTools 的左上角。它可以让您快速访问一些有用的功能，例如 切换主题、设置、分屏、弹出窗口、刷新数据、刷新页面。您只需点击它即可自行查看。

命令面板

命令面板是快速访问 DevTools 的一些有用功能的方法，例如轻松导航、运行命令和 Nuxt 文档。您可以使用 Ctrl+K 或 Cmd+K 快捷键打开它。

分屏

分屏是一个非常实用的功能，可以让你同时使用多个标签页。你可以通过 命令面板 或者点击左上角的 Nuxt 图标 打开它，然后在里面启用它。

弹窗

弹窗对于拥有第二块屏幕的用户来说非常有用，你可以通过点击左上角的 Nuxt 图标 打开它，然后在里面启用它。