【前端开发】 如何下载Vuejs.devtools插件

1,574 阅读1分钟

前言

 Vue.js开发者工具是一款适用于chrome浏览器和Firefox浏览器的浏览器插件,它可以边侧边栏窗格中的页面,边检查代码。

 大家都知道国内用不了谷歌,但是谷歌浏览器是我们前端开发几乎不可或缺的一个重要因素,由于国内无法直接打开Chrome应用商店.所以,可以利用chrome开发者模式,来安装源码码实现使用Vue插件. 安装登录成功后,再去线上安装正式版本. 

安装

 用谷歌浏览器下载一个"Ghelper"插件,也叫谷歌上网助手 下载地址:googlehelper.net/

在这里插入图片描述

下载好"Ghelper"插件之后将其解压,下载好的"Ghelper"插件及其解压文件如下图所示:

在这里插入图片描述

打开谷歌浏览器扩展程序界面,或者浏览器输入:chrome://extensions/ 回车

在这里插入图片描述

右边有一个"开发者模式"按钮打开,点击 "添加已解压的扩展程序" 

在这里插入图片描述

 选择解压包里的 ghelper_source 目录就可以了

在这里插入图片描述

 Ghelpe插件这时候已经安装好了,安装好"Ghelper"插件之后,浏览器右上角搜索框旁边会出现一个彩色圆圈小图标,点击这个Ghelper图标 

在这里插入图片描述

注册一个账号: 

在这里插入图片描述

注册好后它会进入到这个页面,我们不用管

在这里插入图片描述

打开浏览器的扩展程序界面 

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

进入到应用商店,第一次进入会要求登录,在搜索框输入"Vue" 

在这里插入图片描述

点击所框选的"Vue.js devtools"

在这里插入图片描述

 点击"添加到Chrome" 

在这里插入图片描述

添加完成如下提示

在这里插入图片描述

测试

运行Vue项目后,可以检查vue相关的代码

在这里插入图片描述