vue调试工具的安装与使用(vue-devtools)

前言

前端开发者比较熟悉的应该就是 F12 浏览器自带的 Chrome调试工具。但在使用vue进行开发时，就会发现Chrome开发调试中查看DOM结构并不能解析出什么，因为vue是数据驱动的。
但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。
Vue.js devtools，是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，在浏览器开发者工具下调试代码，能极大地提高我们的调试效率。目前该扩展在Chrome和Firefox以及Safari中都得到了支持。

下载vue-devtools插件

下载安装有两种方式，可以直接在Chrome商店安装也可以手动安装（我选择的后者）

Chrome商店安装：

Chrome Extension https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Firefox Addon https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools

Workaround for Safari https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md

手动安装：

gitHub下载地址(不用翻墙) ：
https://github.com/vuejs/vue-devtools

一、下载前调分支

下载之前一定要将分支调整为master分支。
因为默认的develop分支是测试版本，不是正式分支，安装过程中可能会报下面的错误：
报错

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-devtools@5.3.3 build: `cd packages/shell-chrome &&  webpack --progress --hide-modules`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-devtools@5.3.3 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

所以当你npm run build 时出现这个错误时，就需要重新调整分支再下载一次。其它分支有可能也好使，但master分支是一定好使的。

二、下载到本地

下载压缩包并解压，这里我解压到了G盘：
或者可以使用命令行工具（cmd）clone下面的地址到本地：

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

三、安装

（1）进入该文件夹cmd，输入指令npm i 或 cnpm install 安装依赖。

（2）编译代码：npm run build，如图所示即编译成功：

（3）找到G:\vue-devtools-master\shells\chrome中manifest.json文件,把"persistent":false改成true

四、扩展Chrome插件

Chrome浏览器 >右上角三个点 > 更多工具 > 扩展程序

右上角打开开发者模式 > 加载已解压的扩展程序，选择 vue-devtools > shells > chrome 放入, 安装成功如下图：

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

运行vue项目, F12打开调试工具, 选择vue就可以使用了.vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

使用vue-devtools插件

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

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

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

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

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

DevTools扩展也可以处理computed属性：

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

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

如果在computed中查看相关函数的数据还没令你感到兴奋的话，可以再去了解一下远程数据源！