新一代 Vuejs 开发者工具正式开源
相信坚持的力量！今天是坚持日更的第120天，点击关注、点赞、在看支持我
近日，Vuejs 新一代开发者工具（DevTools）正式开源，它在原有基础上提供了更强大、更丰富的功能，进一步提升了开发者的开发体验。下面来看看它带来了哪些新功能。
概述
Vuejs DevTools 是一款旨在增强 Vue 开发人员体验的工具，它提供的一些功能可帮助您更好地理解 Vue 应用程序：
功能介绍
新一代 Vuejs DevTools 带来了众多功能更新。
Overview：
显示应用程序的快速概览，包括 Vue 版本、页面和组件。
Pages：
Pages 选项卡显示当前路由以及一些有用的信息，并提供了快速导航页面的方式。您还可以使用文本框查看每个路由的匹配方式。
Components：
Components 选项卡显示组件的信息，包括节点树、状态等，并提供一些交互功能，例如编辑状态、滚动到组件等。
Assets：
Assets 选项卡显示项目目录中的文件，您可以查看所选文件的信息以及执行一些有用的操作。
Timeline：
Timeline 选项卡可让您浏览以前版本的状态或事件。
Router：
Router 选项卡是与vue-router集成的功能，允许您查看路由列表及其详细信息。
Pinia：
Pinia 选项卡是与 pinia 集成的功能，允许您查看存储列表及其详细信息，并编辑状态。
Graph：
Graph 选项卡显示模块之间的关系。
Settings：
Settings 选项卡提供一些选项以自定义 DevTools，方便开发者进行个性化配置。
Inspect：
Inspect 与 vite-plugin-inspect 集成，允许您检查 Vite 的转换步骤。
Inspector：
Inspector 与 vite-plugin-vue-inspector 集成，您可以检查应用程序的 DOM 树，并查看渲染它的组件。更容易找到作出更改的位置。
Separate Window：
Vuejs DevTools 可以作为独立窗口运行，在调试小屏幕的应用程序时非常有帮助。
快速上手
Vite 插件
快速安装：
npm add -D vite-plugin-vue-devtools
# or
yarn add -D vite-plugin-vue-devtools
# or
pnpm add -D vite-plugin-vue-devtools
# or
bun add -D vite-plugin-vue-devtools
基本用法：
// Configuration Vite
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools(),
],
})
配置项：
interface VitePluginVueDevToolsOptions {
/**
* append an import to the module id ending with `appendTo` instead of adding a script into body
* useful for projects that do not use html file as an entry
*
* WARNING: only set this if you know exactly what it does.
* @default ''
*/
appendTo?: string | RegExp
/**
* Customize openInEditor host (e.g. http://localhost:3000)
* @default false
*/
openInEditorHost?: string | false
/**
* DevTools client host (e.g. http://localhost:3000)
* useful for projects that use a reverse proxy
* @default false
*/
clientHost?: string | false
}
独立应用程序
如果您使用的是不支持的浏览器，或者您有其他特殊需求（例如您的应用程序是 Electron 版本），您可以使用独立应用程序。
快速安装：
# 全局安装
npm add -g @vue/devtools
# 本地安装
npm add -D @vue/devtools
基本用法：
如果你使用的是全局包，可以直接运行 vue-devtools，然后在应用的 <head> 标签内引入 <script src="http://localhost:8098"></script> 或者你想远程调试设备，可以通过一下方式引入：
<script>
window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>
如果你使用的是本地包，可以直接运行 ./node_modules/.bin/vue-devtools，然后在你的应用中直接导入 import { devtools } from '@vue/devtools'，然后通过以下代码连接到 host：
if (process.env.NODE_ENV === 'development') {
devtools.connect(/* host, port */)
}
需要注意的是：确保在 Vue 之前导入 devtools，否则可能无法正常工作。
host 是一个可选参数，用于告知应用程序 devtools 中间件服务器的运行位置，如果在电脑上调试应用程序，则无需设置（默认值为 http://localhost），但如果要在移动设备上调试应用程序，则可能需要传递本地 IP 地址（例如 http://192.168.1.12）。
port 是一个可选参数，用于告知应用程序 devtools 中间件服务器的运行端口。如果使用代理服务器，可能需要将其设置为空，这样端口就不会添加到连接 URL 中。
Chrome 扩展程序
Chrome 插件功能仍在开发中，即将推出，尽请期待！
兼容性说明
新一代 Vuejs DevTools 仅与 Vue 3 兼容。如果您仍在使用 Vue2，请使用 vue-devtools 代替。
参考资料：
https://devtools-next.vuejs.org/guide/browser-extension
大家都在看