Vue devtools的安装与调试（纯新手向教程）

其他vue相关文章可以在我个人分类中的vue.js部分查看

Vue devtools是一款方便与vue开发和调试的工具，然后介绍一下安装过程。官方github

下面来介绍详细安装步骤：

step1：安装vue插件(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

可使用谷歌访 问助手或其他方式来打开应用商店，然后来到该工具的页面，点击添加到Chrome（这里我已经安装过了，所以显示的是移除）或是找到安装包离线啊安装。

然后就可以在浏览器右上角看到一个V的图标

step2：调整配置

右键拓展程序，点击管理拓展程序，勾选 允许文件访问网址。

然后在本地找到一个叫manifest.json的文件, 这个文件大约在这个路径下：C:\Users\Invoker\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\5.1.1_0可以利用Windows的搜索功能直接搜索nhdogjmejiglipccpnnnanhbledajbpd这个文件夹然后向下点击就ok了

然后打开manifest.json，找到如下片段（就在文件最前面）修改其中的true为false，点击保存。最后重启浏览器。

"background": {
      "persistent": true,
      "scripts": [ "build/background.js" ]
   },

step3：使用

在一个使用Vue的网页上点击 F12 就可以在里面看到vue，然后点进去可以看到如下界面，然后就可以使用了。这里要注意的是一定要使用开发版本的vue，如果使用生产版本，是不支持通过vue来进行查看调试的。