vue-浏览器安装vue-devtools

一、谷歌浏览器安装vue-devtools

安装vue-devtools的目的：很简单，便于vue的调试。下载安装google浏览器中vue调试插件的方法：

方法1：手动下载vue-devtools并在vue-tools中手动处理。

1、进入github官网https://github.com/vuejs/vue-devtools下载vue-devtools，选择v5.1.1版本点击下载。

 

 

2、下载完成后，解压。把解压后的文件放到对应路径。我存放在D:\Program Files路径下

 

 

3、windows+r打开cmd，进入D:\Program Files\devtools-5.1.1路径下

 

4、执行cnpm install，下载依赖。

 

5、然后执行npm run build，编译源程序。

 

 

 

6、编译后的文件相对刚下载完的文件多了node_modules文件夹。

 

7、修改编译后的文件中修改shells>chrome>mainifest.json 文件中的persistant为true：

 

8、打开谷歌浏览器的设置--->扩展程序，并勾选开发者模式。点击【加载已解压的扩展程序】，选择chrome整个文件夹。

 

9、选择完成后，等待加载。完成后，右上角会出现Vue的图标。默认是灰色的且调试器处没有vue标签页。

 

10、打开一个vue项目，可以看到谷歌浏览器上方的vue图标点亮且调试器出现vue标签页。

 

方法2：下载已处理好的vue-devtools傻瓜式加载到谷歌浏览器插件中。

1、直接下载已用npm处理过的google插件（下载地址：https://github.com/arcliang/Vue-Devtools-）

 

2、下载完成后，解压，打开文件。

 

3、google浏览器安装vue-devtools

 打开google扩展程序，选择【开发者模式】，通过【加载已解压的扩展程序】将chrome文件添加到扩展程序。

 

打开google调试器，可以看到多显示了vue选项。

 

二、火狐浏览器安装vue-devtools

1、打开火狐浏览器 > 右上角 > 扩展和主题

 

2、输入vue搜索插件，选择【vue.js devtools】

添加到firefox

 

 查看【扩展】

 

 打开firefox浏览器可以看到vue标签页