admin 管理员组

文章数量: 887021

1、下载地址:

https://github/vuejs/vue-devtools

建议大家下载v5.1.1,这样中间出现错误比较少

 

2、点击下载zip后解压

3、打开cmd,这里希望大家以管理员的身份打开,防止出现不必要的报错

E:  可以直接切换到自己想要的盘,进入自己解压后的目录

安装并配置用cnpm使用淘宝镜像

cnpm是淘宝对国外npm服务器的一个完整镜像版本,也就是淘宝 npm 镜像

npm install -g cnpm --registry=https://registry.npm.taobao

 4、cnpm i 下载依赖,这里也可以使用yarn add或则npm i去下载,但是使用淘宝镜像会比较快。

我这里比较快是因为我已经下载过一遍,我是写博客为了截图重新演示

5、下载成功后执行那npm run build

6、然后进入 文件夹找到如下文件

  找到图片对应项改为true后保存文件

7、然后点击浏览器右上角三个点=>更多工具=>拓展工具=>选择加载已解压的拓展工具=>找到下图的文件选择即可

8、此时我们就可以再页面上看到l插件的ogo了,如果没有可以重启浏览器查看

9、我们进行以下操作把插件的标志订在浏览器上方。当我们打开一个项目的时候,如果此项目运用的是vue的框架此光标就会量,如果不是,它就是灰色的

因为这个插件比较常用,刚安装上的时候他是在配置项的最后一项,我们可以把它拖动到前面,方便使用。

本文标签: 浏览器 Vue devtools