前言

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

安装

1.chrome商店直接安装

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

2.手动安装

第一步:找到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文件夹。

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

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

使用

1.入门

让我从一个超级简单的Vue应用程序开始带大家去熟悉Vue的DevTools。

正如你所看到的,我有一个输入字段绑定到一个叫做name的模型,然后是一个列表,它遍历一个cat数组。首先你可能会注意到你的开发工具是“宣布”自己的扩展类型 - 以防你忘了注意右边的标签。

点击Vue选项卡将显示特定于Vue的选项。首先是组件。在我的应用程序中,我只有一个Root应用程序,当您单击它时,它会右侧显示可用的数据。

这是“live”,所以如果我输入字段,它会立即反映在dev tools视图中。更好的是,您可以直接在devtools中进行编辑。将鼠标悬停在项目上将使您可以编辑控件:

DevTools扩展到数组-有完全移除或添加items的选项。要添加item,您需要输入有效的JSON,扩展名将在您输入时提供实时反馈。

2.DevTools扩展也可以处理computed属性

我在代码上在computed属性添加oldcats函数,将cats的数据遍历输出一个age>10的结果,DevTools扩展会将这个结果显示出来。

你不能编辑这些值(因为这是computed的!),但是如果你在数据数组中编辑一个比10更大的值,它将立即显示在下面的computed列表中。

Nice!可能在computed中查看相关函数的数据还没令你感到兴奋的话,那么远程数据源呢?

我使用Star Wars API 作为我的数据源。项目一旦运行,我可以看到devtools扩展中的远程数据,甚至可以编辑它。

3.自定义组件(Components)

那么自定义组件呢?这里是我定义了一个cat组件的脚本。坦白地说,Vue并没有在默认情况下使用它,这是一个严重的错误。

现在看看devtools如何认识新的组件:

注意它是如何拾取发送给它的属性的。现在我要跳过Vuex选项卡,直接进入Events。GitHub仓库中的自述文件不会告诉您一点是“Events”选项卡仅适用于组件所定制的自定义事件。所以当我使用了一个简单的@ click =“doSomethingYo”测试,它并没有呈现,一开始我认为它在渲染的时候被破坏了其实并不是的。在上面的代码示例中,您可以看到我有一个click事件,但是点击它没有发生任何事情。我不得不修改代码来触发出新的事件。

有了这个,你现在可以看到记录的events。有趣的是,devtools扩展会让你知道哪一个事件被解雇了:

点击标签,然后event让你检查是什么触发了它和其他额外的信息。

4.使用Vuex

现在让我们看看Vuex。去年12月,Raymond Camden的博客上发布了一个示例应用程序,它利用Vuex构建了一个简单的股票游戏。这就是Vue DevTools的真正意义所在。您可以深入了解存储中的数据以及运行的突变列表。

左边的是“live”,在股票应用中非常酷,因为它有一个“心跳”,每隔几秒就会发生一次突变。点击它们可以提供有关特定突变的详细信息。

更酷的是你可以通过一个特定的突变来拒绝或回滚你的存储状态。

您还可以使用导出/导入命令来保存/恢复您的Vuex状态。这对于调试问题是非常有用的。

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. 二、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

随机推荐

  1. Linux下找不到动态链接库(转)

    1.生成静态库 生成静态库使用ar工具,其实ar是archive的意思 $ar cqs libhello.a hello.o 2.生成动态库 用gcc来完成,由于可能存在多个版本,因此通常指定版本号: ...

  2. Android开发之使用HttpURLConnection进行POST请求

    一.前提准备 在开始实际编码之前,我们有必要先了解下将会用的类以及方法,进行一个大体的了解. 1.URL类 这个类主要的功能是定位到要获取资源的网址以及打开连接.比如下面的代码: URL realur ...

  3. 有限状态机(FSM)的Java 学习FSM

    本文从简单的例子入手,逐步演变成非常复杂的程序. 在简明 状态模式(5.8)中,状态之间的变换由外界控制,或者说,多种状态是分割的.无关的.状态模式最有趣的地方正是讨论其状态的变迁. 1.引子 空调( ...

  4. http协议请求方法

    解析HTTP协议六种请求方法get.put.post.delete.options和trace含义与区别. 1.GET   selecr请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库 ...

  5. 编译安装linux内核步骤

    编译安装linux内核步骤: 一.获取内核源码 源码网址:www.kernel.org 二.解压内核源码 首先以root帐号登录,然后进入/usr/src子目录.如果用户在安装Linux时,安装了内核 ...

  6. 基于Pygame写的翻译方法

    发布时间:2018-11-01   技术:pygame+easygui   概述 实现一个翻译功能,中英文的互相转换.并可以播放翻译后的内容. 翻译接口调用的是百度翻译的api接口. 详细 代码下载: ...

  7. update pm storage

    BEGIN #Routine body goes here... INSERT INTO EMS_PM_STORAGE ( AMOID, GP_BEGIN_TIME, EMS_RECORD_TIME, ...

  8. Android中创建倒影效果的工具类

                     一.有时候我们需要创建倒影的效果,我们接触最多的都是图片能够创建倒影,而布局依然可以创建倒影.       二.工具类代码 import android.graphi ...

  9. [Spring学习笔记 3 ] spring 注解详解,完全注解,常用注解

    .xml使用注解 xml 用来定义bean的信息,注解用来配置依赖信息 ) 在配置文件中配置bean )在javaBean中用注解来指定依赖注入 )在配置文件中开启注解扫描 @Resource标签 j ...

  10. IKE 协议(转)

    from: http://lulu1101.blog.51cto.com/4455468/817872 IKE 协议 2012-03-26 21:49:50 标签:休闲 ike 职场 IKE 协议简介 ...