Vue devtools的安装与调试(纯新手向教程)

14,846 阅读1分钟

Vue devtools是一款方便与vue开发和调试的工具,然后介绍一下安装过程。(中间还是有很多坑的) github: github.com/vuejs/vue-d…

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

step1:安装vue插件(chrome.google.com/webstore/de…)

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

在这里插入图片描述
然后就可以在浏览器右上角看到一个V的图标

step2:调整配置

在这里插入图片描述
右键拓展程序,点击管理拓展程序,勾选 允许文件访问网址。
22222述
然后在本地找到一个叫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来进行查看调试的。

在这里插入图片描述