新一代 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
大家都在看