近日,Vue 新一代开发者工具(DevTools)正式开源!Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具,它提供了一些功能来帮助开发者更好地了解 Vue 应用。下面就来看看新一代 Vue DevTools 的功能和使用方法!
功能
首先来看看 Vue DevTools 中都有哪些功能!
Overview:显示应用的概述,包括 Vue 版本、页面数量和组件数量。
![87f5a08bafaab86c6cf259235acb1092.png](https://i-blog.csdnimg.cn/blog_migrate/6141145d87dc80c82bd56de0964961ba.png)
Pages:Pages 选项卡显示当前的路由以及相关信息,并提供在页面之间快速导航的方法,还可以使用文本框查看每个路由的匹配情况。
![8b983fda534bc478a590f667aa854dae.png](https://i-blog.csdnimg.cn/blog_migrate/2b87efa745eeb8419941cda17f3d21a8.png)
Components:Components 选项卡显示组件信息,包括节点树、状态等,并提供一些交互功能,例如编辑状态、滚动到组件等。
![f02afd7c4108f5baffa4227941734c9c.png](https://i-blog.csdnimg.cn/blog_migrate/369d9380113c622fabb2393b642ce842.png)
Assets:Assets 选项卡显示项目目录中的文件,可以查看所选文件的信息。
![d43ac5d729f41f8e66b53eab93b95e34.png](https://i-blog.csdnimg.cn/blog_migrate/1855d05525e72b6609748241b66f5440.png)
Timeline:Timeline 选项卡可以浏览状态或事件的先前版本。
![046b85ffd4139f9fd300de7705d67e6d.png](https://i-blog.csdnimg.cn/blog_migrate/ce3f91ba4d199f214a671c653ecdcf62.png)
Router:Router 选项卡与 vue-router 集成,可以查看路由列表及其详细信息。
![8204e55a7bea8267da478ab26029af6f.png](https://i-blog.csdnimg.cn/blog_migrate/5f9b169eec0dbf8f3dae30c4f6c21b01.png)
Pinia:Pinia 选项卡与 Pinia 集成,可以查看存储列表及其详细信息,并编辑状态。
![0c6d0bf1ff757b94312c586297c611cd.png](https://i-blog.csdnimg.cn/blog_migrate/c3356b7c923b7003fe7cca075a0158a6.png)
Graph:Graph 选项卡显示模块之间的关系。
![3464cdde92f4a06691ce4f9399db5060.png](https://i-blog.csdnimg.cn/blog_migrate/f260709ee5abf36e559162ef3867a071.png)
Settings:Settings 选项卡提供了一些用于自定义 DevTools 的选项。
![124c550a6f05c3609f023cf3b694b3d8.png](https://i-blog.csdnimg.cn/blog_migrate/a9271e6a4b3059768b7feab397e193f7.png)
Inspect:Inspect 与 vite-plugin-inspect 集成,可以检查 Vite 的转换步骤。
![65a15a714c5799067c1680bafeb26e0a.png](https://i-blog.csdnimg.cn/blog_migrate/ffd35e934ad74a29e3bfa98cd939f27a.png)
Inspector:Inspector 与 vite-plugin-vue-inspector 集成,可以检查应用的 DOM 树,并查看渲染它的组件,这样可以更轻松地找到需要进行更改的位置。
![79ad9690ab944126793e7ee965cc56d5.png](https://i-blog.csdnimg.cn/blog_migrate/dd74bf065c887dcd1683c27bb29084ab.png)
独立窗口:Vue DevTools 可以作为一个独立的窗口运行,当你想在小屏幕上调试应用时,它非常有帮助。
![e7e5184320703bda64dc64fb3bc65703.png](https://i-blog.csdnimg.cn/blog_migrate/e553d78c29fe7c42e3e96519d3fa2e73.png)
使用
在 Vue 项目中使用 Vue DevTools 的方法有多种:
Vite 插件
独立应用
Chrome 扩展(目前还在开发中)
![715b697272ea577fcc37ce97e42fae41.png](https://i-blog.csdnimg.cn/blog_migrate/5101cd1a72c65699b06d8a0eb075d802.png)
注意:
DevTools 仅兼容 Vue 3。如果使用 Vue2,请改用 vue-devtools。
如果使用 Nuxt,请使用 nuxt-devtools 以获得更强大的开发者体验。
Vite 插件
第一种运行 Vue DevTools 的方法就是 Vite 插件。如果项目使用 Vite,强烈建议将其作为运行 DevTools 的首选项,因为它提供了更强大的功能。
注意:Vue DevTools 需要 Vite v3.1 或更高版本。
首先,通过以下命令来安装 Vue DevTools:
npm add -D vite-plugin-vue-devtools
用法:
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
}
配置项如下:
appendTo
:将一个导入附加到模块id
以appendTo
结尾,而不是将脚本添加到<body>
中。对于不使用 HTML 文件作为入口的项目非常有用。注意,只有在确切了解其功能的情况下才设置此选项。默认值为''
。openInEditorHost
:自定义打开编辑器的主机(例如:http://localhost:3000
)。默认值为false
。clientHost
:DevTools 客户端主机(例如:http://localhost:3000
),对于使用反向代理的项目非常有用。默认值为false
。
独立应用
如果使用不受支持的浏览器,或者有其他特定需求(例如应用位于 Electron 中),可以使用独立应用。
![f01b4f87e1d1f07d2d44369868bcbbd9.png](https://i-blog.csdnimg.cn/blog_migrate/b04f581aa1c5e586e03aac6dcb10043e.png)
npm add -g @vue/devtools
安装完成之后,在终端中运行以下命令:
vue-devtools
然后将以下代码添加到应用 HTML 文件的<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>
可以在官方文档查看详情:https://devtools-next.vuejs.org/guide/standalone
查看
官网:https://devtools-next.vuejs.org/
Github:https://github.com/vuejs/devtools-next