Vue调试神器vue-devtools安装

75

前言

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

chrome商店直接安装

vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。

手动安装

第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools

git clone https://github.com/vuejs/vue-devtools.git

第二步:安装项目所需要的npm包

npm install   //如果太慢的话,可以安装一个cnpm, 然后命令换成 cnpm install

第三步:编译项目文件

npm run build

第四步:添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序...”按钮,选择vue-devtools>shells下的chrome文件夹。

/**
*如果看不见“加载已解压的扩展程序...”按钮,则需要勾选“开发者模式”。
*/

第一张图

第二张图

到此添加完成,效果图如下:

这里写图片描述

鉴于评论中很多小伙伴们有很多同学编译不成功,我这里把编译过的文件上传了百度云,后续步骤依旧,并且还附上了一个.crx文件,在chrome拓展程序页面上把文件拖进去即可安装。若百度云失效可文章下留言,我看到后会重新生成链接。

 链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg  密码:1hsv

谷歌访问助手

下载地址:http://www.ggfwzs.com/

下载的压缩包解压之后有一个.crx文件以及一个使用教程,小伙们可以按照这个教程进行安装。安装之后,你的浏览器会多一个谷歌访问助手的插件。点击插件会弹出一个面板,上面有一个调整拓展程序商店的链接,点击调整之后你会打开一个和chrome商店一样的页面,在这上面你可以随心所欲安装你的插件。
图片描述

图片描述

结语:vue-devtools如何使用

当我们添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。

vue调试工具

你可能感兴趣的

64 条评论
路文瑞 · 3月24日

楼主,执行不了npm run build 部分是怎么回事?

回复

0

报了什么错?

wuming 作者 · 3月24日
0

npm run build 会报错 Module build failed: CssSyntaxError

LeoCong · 3月31日
0

我重新下载了最新的代码build了一下,是ok的。检查一下你的node版本,新代码用的webpack4,node版本至少大于6.11.5

wuming 作者 · 4月3日
不知道 · 4月3日

Error: Cannot find module 'error-ex',我也是执行npm un build报错,试了好多次了,总是不行。

回复

0

我重新下载了最新的代码build了一下,是ok的。检查一下你的node版本,新代码用的webpack4,node版本至少大于6.11.5

wuming 作者 · 4月3日
0

我知道是什么原因,是还有依赖没有安装成功,但我今天又重头来,依赖还是安装不全,郁闷呀!!

不知道 · 4月4日
0

我用cnpm或者yarn都安装成功了,你电脑上node版本是多少?

wuming 作者 · 4月4日
小龙人 · 4月5日

我也是build失败 Syntax Error: Unknown word

回复

0

先检查自己的node版本是不是大于6.11.5,不是的话自己升级一下。如果升级完之后还不行,换成cnpm或者yarn去安装一下包。

wuming 作者 · 4月5日
0

node是9.多,用的也是cnpm install ,但是build之后还是包这个错,求指教

Sofiya · 4月25日
0

node是9.多,用的也是cnpm install ,但是build之后还是包这个错,求指教

pengzhongyan · 5月2日
joy_wang · 4月20日

方法是可以的,但是要记住git clone以后,先进入vue-devtools这个文件夹里面,再执行npm install 和 npm run build,因为package.json是在项目里面的

回复

0

翻墙才是王道哦 直接去应用商店下载 贼快的 即下即用

张强 · 4月23日
0

文章末尾增加编译过后的文件的分享地址并附有.crx文件,下载下来即可使用

wuming 作者 · 5月4日

npm ERR! path D:tryvue-devtoolsnode_modules_cacache@10.0.4@cacachenode_modulesglob
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'D:tryvue-devtoolsnode_modules_cacache@10.0.4@cacachenode_modulesglob' -> 'D:tryvue-devtoolsnode_modu
les_cacache@10.0.4@cacachenode_modulesglob'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersAdministratorAppDataRoamingnpm-cache_logs2018-04-20T09_44_43_438Z-debug.log
undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-devtools@4.1.4 build: cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
npm ERR! Exit status 1
npm ERR!

D:tryvue-devtools>node -v
v8.9.3
"webpack": "^4.0.0",

就搞不懂了官方的这个文件怎么这么多问题,没法安装

回复

0

兄弟们翻墙才是王道

张强 · 4月23日
0

文章末尾增加编译过后的文件的分享地址并附有.crx文件,下载下来即可使用

wuming 作者 · 5月4日
hubyo · 4月28日

是我版本太高了吗

Unchecked runtime.lastError while running contextMenus.remove: Cannot find menu item with id vue-inspect-instance

回复

0

文章末尾增加编译过后的文件的分享地址并附有.crx文件,下载下来即可使用

wuming 作者 · 5月4日
0

兄弟 同命相连啊 我安装楼主提供的的.crx文件打开页面报的同样的错 从应用商店下载的也是这个错 不知道什么情况 你的什么系统 现在安装成功了吗

levo · 6月7日
0

卧槽,我恼了两天了,前天突然vuex的tab页变空白了,时有时无的,看了下扩展程序,vue的devtool报错了,找不到vue-inspect-instance和背景页失效,到现在还没查出问题所在。。。你们解决了吗?

Joki · 9月19日
哆小爱 · 5月2日

不能翻墙,安装chrome插件之前都是crx文件安装。
按照手动安装的方式,是不是安装后,这个项目要一直留着,不能删呢?

回复

0

手动安装的方式文件夹是要保留的,但文章末尾我已分享了.crx文件了。

wuming 作者 · 5月4日
阿怪 · 5月2日

执行 npm run build 失败

环境如下:
vue-devtools@4.1.4
cnpm@5.2.0 (E:Program Filesnodejsnode_globalnode_modulescnpmlibparse_argv.js)
npm@5.8.0 (E:Program Filesnodejsnode_globalnode_modulescnpmnode_modulesnpmlibnpm.js)
node@8.11.1 (E:Program Filesnodejsnode.exe)
npminstall@3.5.0 (E:Program Filesnodejsnode_globalnode_modulescnpmnode_modulesnpminstalllibindex.js)
prefix=E:Program Filesnodejsnode_global
win32 x64 10.0.14393
registry=https://registry.npm.taobao.org

错误信息:

vue-devtools@4.1.4 build E:studyvue-devtools-master
cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules

95% emitting

ERROR Failed to compile with 15 errors 13:10:37

error in E:/study/vue-devtools-master/src/devtools/App.vue?vue&type=style&index=1&id=7f657530&lang=stylus&scoped=true

Syntax Error: Unknown word

@ E:/study/vue-devtools-master/src/devtools/App.vue?vue&type=style&index=1&id=7f657530&lang=stylus&scoped=true 1:0-442 1:463-902
@ E:/study/vue-devtools-master/src/devtools/App.vue
@ E:/study/vue-devtools-master/src/devtools/index.js
@ ./src/devtools.js

error in E:/study/vue-devtools-master/src/devtools/components/ActionHeader.vue?vue&type=style&index=0&id=3fe0bf15&lang=stylus&scoped=true

Syntax Error: Unknown word

@ E:/study/vue-devtools-master/src/devtools/components/ActionHeader.vue?vue&type=style&index=0&id=3fe0bf15&lang=stylus&scoped=true 1:0-466 1:487-950
@ E:/study/vue-devtools-master/src/devtools/components/ActionHeader.vue
@ E:/study/vue-devtools-master/node_modules/_buble-loader@0.4.1@buble-loader??ref--1-0!E:/study/vue-devtools-master/node_modules/_vue-loader@15.0.5@vue-loader/lib??vue-loader-options!E:/study/vue-devtools-master/src/devtools/views/events/EventsHistory.vue?vue&type=script&lang=js
@ E:/study/vue-devtools-master/src/devtools/views/events/EventsHistory.vue?vue&type=script&lang=js
@ E:/study/vue-devtools-master/src/devtools/views/events/EventsHistory.vue
@ E:/study/vue-devtools-master/node_modules/_buble-loader@0.4.1@buble-loader??ref--1-0!E:/study/vue-devtools-master/node_modules/_vue-loader@15.0.5@vue-loader/lib??vue-loader-options!E:/study/vue-devtools-master/src/devtools/views/events/EventsTab.vue?vue&type=script&lang=js
@ E:/study/vue-devtools-master/src/devtools/views/events/EventsTab.vue?vue&type=script&lang=js
@ E:/study/vue-devtools-master/src/devtools/views/events/EventsTab.vue
@ E:/study/vue-devtools-master/node_modules/_buble-loader@0.4.1@buble-loader??ref--1-0!E:/study/vue-devtools-master/node_modules/_vue-loader@15.0.5@vue-loader/lib??vue-loader-options!E:/study/vue-devtools-master/src/devtools/App.vue?vue&type=script&lang=js
@ E:/study/vue-devtools-master/src/devtools/App.vue?vue&type=script&lang=js
@ E:/study/vue-devtools-master/src/devtools/App.vue
@ E:/study/vue-devtools-master/src/devtools/index.js
@ ./src/devtools.js

回复

0

已解决。vue-devtools@4.1.4 换成 4.1.3版本 ok

阿怪 · 5月2日
pengzhongyan · 5月2日

node是9.多,用的也是cnpm install ,但是build之后还是包这个错,求指教

回复

pengzhongyan · 5月2日

ERROR in F:/java_workspace/vue-devtools-master/node_modules/_vue-loader@15.0.5@v
ue-loader/lib/loaders/stylePostLoader.js
一直报这个错误

回复

0

文章末尾增加编译过后的文件的分享地址并附有.crx文件,下载下来即可使用

wuming 作者 · 5月4日
Baomer · 5月23日

楼主,我安装完之后vue那一栏里什么都没有啊,怎么回事啊。

回复

0

chrome拓展程序那里有没有打开vue-devtools?

wuming 作者 · 5月23日
0

@wuming 打开了,开发者工具也打开了。项目也跑着呢,就是啥都没有,- -!

Baomer · 5月23日
0

@Baomer 你用的vue是开发版本还是生产版本

wuming 作者 · 6月6日
何处许年华 · 5月30日

最新版本编译失败之后,重新下载了4.1.3的,编译成功。可能是版本问题。
node:v8.11.2
npm:5.6.0

回复

超棒棒的Macixsq · 6月4日

直接科学上网到chrome商店安装的插件 直接crx文件安装浏览器不允许开启
科学上网方法 百度 老D hosts

回复

0

为什么Chrome不允许crx文件安装?

wuming 作者 · 6月4日
0

@wuming chrome会认为手动安装的crx文件是危险的,不能使用

york_lin · 6月4日
0

@york_lin 你有打开开发模式吗

wuming 作者 · 6月5日
聆听记忆 · 6月6日

good 一次成功。。

回复

· 6月6日

一次成功+1

回复

XinFor · 6月12日

直接chrome商店安装,快速无烦恼

回复

cherry · 6月26日

没人遇到加载扩展的时候出现清单缺失的情况吗?

回复

Ivyjiang · 7月2日

感谢楼主! 我已经装好了

回复

Sirius · 7月4日

楼主,我想问一下,我的Vue调试的图标每次点击都是vue.js not detected,然后在谷歌浏览器里面的检查里面是可以使用的,想问问这是正常的吗?我是直接用了谷歌浏览器助手然后翻墙进应用商店下载的。

回复

0

当没有检测到有new出来的Vue对象时,图标会显示vue.js not detected。当有window.Vue时,调试器的工具栏那里会有Vue这一栏。

wuming 作者 · 7月4日
0

感谢您

Sirius · 7月4日
xingmei_ok · 7月10日

手动安装,命令执行都成功了,拓展程序选择文件夹的时候,浏览器直接卡死了啊;最好直接拖拽过来那个文件,还是不能用啊,报错;该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的。

回复

0

你用的是.crx文件还是编译出来的文件夹

wuming 作者 · 7月18日
载入中...