转载:https://segmentfault.com/a/1190000009682735

前言

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文件夹。

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

 

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

结语:vue-devtools如何使用

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

附录

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

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

【vue】Vue调试神器vue-devtools安装的更多相关文章

  1. Vue开发调试神器 vue-devtools

    Vue开发调试神器: vue-devtools 1. 下载Chrome扩展插件GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像 ...

  2. vue 代码调试神器

    一.序 工欲善其事,必先利其器.作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题.作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是 ...

  3. 简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...

  4. vue学习记录(一)—— vue开发调试神器vue-devtools安装

    网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...

  5. vue-devtools vue开发调试神器

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...

  6. google vue开发调试插件,简便安装,亲测可用

    前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...

  7. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  8. Vue中devtools安装使用

    vue.js的devtools安装 安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工 ...

  9. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  10. Vue DevTools 安装应用

    1.https: //github.com/vuejs/vue-devtools  从这上面下载Vue DevTools: 2.npm install(cnpm install) && ...

随机推荐

  1. Sidekiq(部分基础,有几个使用案例和active_job的用法)

    Sidekiq (8700✨) git :  https://github.com/mperham/sidekiq https://www.cnblogs.com/richard1234/p/3829 ...

  2. 52 53django

    一.需要弄清楚的几个关键点: KEY: 1 Django项目无论多大,只是一个应用程序 2 地址栏发请求默认是GET请求 form表单可以发送get请求,也可以发送post请求 3 浏览器接受的响应体 ...

  3. 『科学计算_理论』SVD奇异值分解

    转载请声明出处 SVD奇异值分解概述 SVD不仅是一个数学问题,在工程应用中的很多地方都有它的身影,比如前面讲的PCA,掌握了SVD原理后再去看PCA那是相当简单的,在推荐系统方面,SVD更是名声大噪 ...

  4. bzoj3944: Sum 杜教筛板子题

    板子题(卡常) 也可能是用map太慢了 /************************************************************** Problem: 3944 Us ...

  5. thinkphp %s %d %f

    %s -- 表示字段串%d -- 表示整形数字%f -- 表示浮点数 例子:$order_number = $m_ebay_order_numbers->where("ebay_ord ...

  6. hdu 1258

    Sum It Up Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  7. HDU1789时间贪心

    Doing Homework again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  8. 关于最短路的想法&&问题

    今天本想水几道floyd却被坑了:注意考虑<重边>!!!!!!!!!!!!!!! 小心图里出现的重边,如果不处理的话,必然WA!构图时一定要仔细!

  9. UVA-10726 Coco Monkey(递推)

    题目大意:n个人,m个猴子分桃,第一个人把桃子分成n份余下m个,第一个人将余下的给猴子,拿走自己的那份.第二个人把剩下的桃子也分成n份,余下m个,将余下的分给猴子,拿走自己的那份.………… 直到n个人 ...

  10. Generate PDF in Sourcing through concurrent request,在EBS java并发中调用指定am的方法

    package oracle.apps.pon.printing.cp; import java.io.InputStream; import java.io.FileOutputStream; im ...