vue调试工具vue-devtools安装及使用说明

更新时间：2026年04月25日 11:40:00 作者：AC_meimei

该文章主要介绍了如何安装和配置Vue Devtools扩展,首先需要克onole 克隆工具包代码并安装相关依赖,接着需要修改 persistent 字段的值为 true 幄节约安装时间,然后在 Chrome 浏览器中打开扩展程序设置,最后上传并检查安装是否成功,出现相应图标即表示安装完成

一、先克隆工具包代码

https://gitcode.net/mirrors/vuejs/vue-devtools.git

二、安装

1、安装 yarn 和镜像

为了节约安装时间：

1️⃣   npm install -g yarn
2️⃣   yarn config set registry https://registry.npm.taobao.org --global
3️⃣   yarn config set disturl https://npm.taobao.org/dist --global
4️⃣   yarn config get registry

2、在vue-devtools目录下打开cmd

1️⃣  yarn install
2️⃣  yarn run build

3、全局搜索persistent字段

把 "persistent":false 改成 true。

4、打开Chrome浏览

打开扩展程序(右上角4个点—>更多工具—>扩展程序—>打开开发者模式开关)。

(1)第一步：

(2)第二步：

(3)第三步：上传后显示这个弹窗,说明安装成功了，可以正常使用了。

注意：如果没有出现下面这图标，可以关闭浏览器重新打开就有了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

前端Vue中常用rules校验规则详解
这篇文章主要介绍了前端Vue中常用rules校验规则详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
vue结合leaflet实现鹰眼图
本文主要介绍了vue结合leaflet实现鹰眼图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
VueCli生产环境打包部署跨域失败的解决
这篇文章主要介绍了VueCli生产环境打包部署跨域失败的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue抽出组件并传值实例
这篇文章主要介绍了vue抽出组件并传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue项目中CSS Modules和Scoped CSS的介绍与区别
在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS Modules和Scoped CSS的相关资料,需要的朋友可以参考下
2022-03-03
vue实现树形结构样式和功能的实例代码
这篇文章主要介绍了vue树形结构样式和功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
vue3提示用户版本更新方式
本文介绍了如何在项目中创建和使用自定义插件,以在构建过程中检查版本号,具体步骤包括在项目根目录下创建buildLifeHook.ts文件,并在public目录下创建version文件夹,然后在vite.config.ts中引用该插件,并在src/utils目录下创建XxzUtils.ts文件
2024-12-12
Vue3结合TypeScript项目开发实战记录
听说有的公司已经开始用vue3了赶紧打开B站学一下,下面这篇文章主要给大家介绍了关于Vue3结合TypeScript项目开发实战的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-09-09
vue动态循环出的多个select出现过的变为disabled(实例代码)
本文通过实例代码给大家分享了vue动态循环出的多个select出现过的变为disabled效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-11-11
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04