Chrome浏览器安装Vue Devtools插件(附带编译好的工具包)

我们在使用vue开发项目的时候,如果想要更好的审查和调试 vue 应用,可以使用官方推荐的Vue Devtools。

但是官方的方法比较麻烦,要使用npm编译,搞不好还会报好多莫名其妙的错误。

下面给大家提供一个简便的方法,不会再浪费大家宝贵的时间啦!

1.获取Vue Devtools插件

我已经将编译好的插件上传到博客里啦,可以免费下载->vue-devtools。也可github下载,见底部。

解压后得到一个 vender 文件夹,打开后目录结构如下

在这里插入图片描述

打开 manifest.json文件,找到 "persistent”,将它的值改成true

在这里插入图片描述

2.配置浏览器并安装

打开Chrome浏览器,找到 扩展程序

在这里插入图片描述

选择打开开发者模式

在这里插入图片描述

然后把 整个 vender 文件夹拖进浏览器窗口即可!一定是整个文件夹,少了一个文件都不行!丢进去之后看到如下界面,此时可以看到右上角多了一个扩展插件的图标

在这里插入图片描述

点击详细信息,下面这些都是默认勾选上的

在这里插入图片描述

3.测试

安装完后可以发现右上角的vue图标是灰色的,我们可以选择把它固定到浏览器上面

在这里插入图片描述

用浏览器打开一个 vue 项目, vue图标点亮,控制台多了一个vue调试窗口,则说明安装成功!

在这里插入图片描述

注意,普通项目下vue图标也是灰色的,这个扩展插件只有在vue项目下才可用!

博客资源审核太慢啦,已经传到github上了 vue-devtools ,github上克隆下来的文件名是vue-devtools,如果是通过git克隆得到的扩展插件,只需把上文提到的vender看作是vue-devtools,只是文件名不一样啦。

猜你喜欢

转载自blog.csdn.net/qq_45745643/article/details/108503680