vue调试工具vue -devtools的安装

目录

 

前言

vue-devtools是什么？

为什么要安装该插件? 

安装Vue Devtools有两种方法：

 方法一：chrome商店上直接下载（前提是该电脑已经翻墙）。   

方法二：官网下载源代码，在chrome中加载已解压的扩展程序。

---

前言

vue-devtools是什么？

        vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。

为什么要安装该插件? 

        因为vue是进行数据驱动的，仅仅从chrome浏览器的控制台进行element查看，是看不到数据的动向的。

 

安装Vue Devtools有两种方法：

 方法一：chrome商店上直接下载（前提是该电脑已经翻墙）。   

           vue-devtools可以从chrome商店直接下载安装，不过需要翻墙才能下载，由于安装很简单，而其大多数人都没有翻墙，所以这里就不细说了。

 

方法二：官网下载源代码，在chrome中加载已解压的扩展程序。

            具体步骤：

1.在github上下载vue-devtools的压缩包，github下载地址：https://github.com/vuejs/vue-devtools。点击1——>点击2——>点击3，下载压缩包                                                                                                                                                                               

2.解压

进入vue-devtools-master工程 执行cnpm install, 下载依赖

 

 

3.执行npm run build，编译源程序。                            

 

4.打开文件夹shells —> chrome下的manifest.json，将premissions的值改为true。

5.打开chrome浏览器，点击1——>点击2——>点击3，进入扩展程序页面

                         

6.导入安装包

方法1）：点击1——>点击2——>点击3

方法2）：直接将chrome文件夹拖进扩展程序页面里。

7.安装完成

8.使用调试工具

    8.1运行一个vue项目

    8.2在chrome上打开7.1中运行的vue项目，如下，打开控制台，点击末尾的Vue即可进入调试。