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

朱雀 2022-05-20 03:27 358阅读 0赞

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

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧

**安装:**

**1.到github下载：**

git clone https://github.com/vuejs/vue-devtools
    //下载太慢的话可直接去这个地址 下载压缩包

**2.在vue-devtools目录下安装依赖包**

//进入你下载的那个文件目录
    cd vue-devtools
    
    //如果有安装cnpm，不然就用npm下载依赖 
    cnpm install

**3.修改manifest.json文件**

![1055753-20170827152637589-1152375876.png][]

把”persistent”:false改成true

![1055753-20170827152825605-2132649031.png][]

**4.编译代码**

npm run build

**5.扩展Chrome插件**

Chrome浏览器 > 更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

![1055753-20170827153453605-1374332252.png][]

**6. vue-devtools使用**

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

![1055753-20170827154217839-1267585798.png][]

温情提示:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

转自：[https://www.cnblogs.com/yuqing6/p/7440549.html][https_www.cnblogs.com_yuqing6_p_7440549.html]

[1055753-20170827152637589-1152375876.png]: /images/20220520/8075017b7afd4a4caefd118b7d8a829a.png
[1055753-20170827152825605-2132649031.png]: /images/20220520/1997b0c00f334f3083b4f4783d46443d.png
[1055753-20170827153453605-1374332252.png]: /images/20220520/bbce27ea2c4c4b608695f6be90ad7384.png
[1055753-20170827154217839-1267585798.png]: /images/20220520/d68e6ec533944344aabdbf6a5b12cdd0.png
[https_www.cnblogs.com_yuqing6_p_7440549.html]: https://www.cnblogs.com/yuqing6/p/7440549.html

发表评论取消回复

表情：

评论列表（有 0 条评论，358人围观）

还没有评论，来说两句吧...

相关阅读

相关谷歌浏览器安装 vue 调试工具 vue devtools

谷歌浏览器安装 vue 调试插件 vue devtools，对于调试 vue 项目非常方便，本文介绍如何安装 1、在 github 下载 vue devtools

Love The Way You Lie/ 2023年06月21日 03:45/ 0 赞/ 45 阅读

相关 vuedevtools插件安装

目前vuedevtools插件安装主要有三种方式，选择适合自己的方式即可 1.在线安装众所周知，国内网络环境比较难按，如果能安的话还是推荐在线安装在线安装地址：[ht

ゝ一纸荒年。/ 2023年01月21日 14:26/ 0 赞/ 263 阅读

相关 vue调试工具vue-devtools安装及使用

安装: 1.到github下载：（下载一定要记得是master环境的代码，默认克隆后进入的是dev环境，执行npm run build会报错，执行git checkou

落日映苍穹つ/ 2023年01月04日 13:27/ 0 赞/ 137 阅读

相关 Vue调试工具vue-devtools安装

Vue-DevTools的安装使用方法一：点击谷歌浏览器右上角「三点」图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

﹏ヽ暗。殇╰゛Y/ 2022年12月13日 14:25/ 0 赞/ 224 阅读

相关 Vue调试工具 vue-devtools 的安装步骤和使用

方法1：翻墙下载 [Vue.js devtools - 翻墙安装方式 ][Vue.js devtools - _] 方法二：导入插件包给大家准备了百度网盘链接

喜欢ヅ旅行/ 2022年11月06日 15:46/ 0 赞/ 295 阅读

相关 vue调试工具vue-devtools安装及使用

vue调试工具vue-devtools安装及使用本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-d

朱雀/ 2022年05月20日 03:27/ 0 赞/ 359 阅读

相关安装vue调试工具 vue-devtools

vue-devtools是一款基于chrome浏览器的插件，在调试过程中可以省去打console.log，他会自动把我们在data上定义的数据动态的显示出来（数据改变，它也跟随

绝地灬酷狼/ 2022年05月14日 04:13/ 0 赞/ 479 阅读

相关 Vue浏览器简易安装调试工具vue-devtools

环境要求： Node 6+ NPM 3+ git (非必要) 第一步将vue-devtools的github项目下载到本地 1.第一种（有git工

╰+哭是因爲堅強的太久メ/ 2022年04月13日 10:52/ 0 赞/ 757 阅读

相关 vue 调试工具 vue-devtools

工欲善其事, 必先利其器。首先下载该工具源码 [https://github.com/vuejs/vue-devtools][https_github.com_vuejs_

ゝ一世哀愁。/ 2022年03月10日 06:36/ 0 赞/ 345 阅读

相关 vue调试工具vue-devtools安装及使用

一、为什么要使用vue-devtools 由于用vue脚手架写的源代码，运行时，先经过webpack打包，打包后的结果和我们的源代码不一样，所以，没法调试程序，没法

r囧r小猫/ 2021年10月24日 00:36/ 0 赞/ 613 阅读