VUE 调试神器 vue-devtools

概述

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文件夹。/**
*如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。
*/

网盘已经存在可以使用的扩展程序包，大家下载后，可以解压缩,然后添加到谷歌的扩展程序中。

链接：https://pan.baidu.com/s/1A3YS7bHvXTNoWp6wBihV-w
提取码：j2wj

结语：vue-devtools如何使用

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

BUG

网盘的包已经修改过了，如果是从GIT下载编译，请自行修改：

代码中一定要加这句代码，否则不生效。

剩下的就祝你成功了。

VUE 调试神器 vue-devtools相关推荐

Vue调试神器vue-devtools - 插件下载安装
文章目录 Google如何安装调试Vue的神器`vue-devtools` ? 安装介绍: demo实例 - 演示代码: 相关文章链接: 1. https://github.com/vuejs/vue ...
卧槽，这个Vue调试神器牛逼！点击页面元素居然能直接打开对应组件文件…
点击上方"蓝色字体",选择"设为星标" 做积极向上的前端人! 1. 前言我的文章尽量写得让想看源码又不知道怎么看的读者能看懂.我都是推荐使用搭建环境断点调试源 ...
【进阶篇】Vue Devtools——vue开发调试神器
工欲善其事,必先利其器,vue2.0进阶系列的知识更接近我们的实际开发所需,在开发过程中,有个好的调试工具是事半功倍的,Vue Devtools就是我们选择的调试工具,它是一款chrome浏览器的插件 ...
vue 代码调试神器
一.序工欲善其事,必先利其器.作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题.作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是 ...
不使用架构工具在vscode中操作vue,扩展添加vue.js.devtools（Hollo案例）
1.请直接复制下面的代码到一个 HTML 文件中,并在浏览器中打开它 <div id = "root"&g ...
移动端调试神器vConsole
介绍平时在web应用开发过程中,我们可以console.log去输出一些信息或者看接口返回的信息及接口性能等情况,但是在移动端,也就是在手机上,我们是看不到的. 这种情况下,可以选择使用alert弹 ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...
Vue.js 从 Vue 1.x 迁移
从 Vue 1.x 迁移 FAQ 哇,非常长的一页!是否意味着 Vue 2.0 已经完全不同了呢,是否需要从头学起呢,Vue 1.0 的项目是不是没法迁移了? 非常开心地告诉你,并不是!几乎 90% ...
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...