Vue Devtools的安装与使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83718004

  Vue Devtools是Vue代码的浏览器调试插件。

Vue Devtools的GitHub官网地址

  Vue Devtools是一款开源的浏览器插件，其GitHub地址如下：

• vue-devtools

  在这里如果我们想使用Vue Devtools的话，我们有两种安装方式：

• 通过浏览器插件安装
• 通过源码安装

安装 Vue Devtools

通过浏览器插件安装

  Vue Devtools一共提供了两个现成的浏览器插件安装版本，分别是Chrome与Firefox，考虑到国内大多数主流浏览器都是基于Chrome内核所做的二次开发，比如说下图所示的情况：

  因而我这里以Chrome版本的浏览器插件为例进行安装。

  Chrome浏览器插件下载地址：

• Chrome Extension

  其解压后的文件为：

vue devtools.crx

  vue devtools.crx浏览器插件安装起来非常方便，因为其能够直接被Chrome内核浏览器识别，所以说直接双击打开就行了。比如说我本地的vue devtools.crx就能够被360急速浏览器所识别，其它的Chrome内核浏览器大体上于此都相同。

通过源码安装

  通过源码安装的方式安装，首先得需要我们克隆或下载vue-devtools源码项目，其下载方式也比较简单，如图：

  通过命令行的方式进入vue-devtools根目录，执行下面的安装命令：

cnpm install

  当我们看到下面的信息时，这说明我们的vue-devtools已经安装成功。

  接下来就是启用vue-devtools浏览器插件，此时我们需要执行下面的命令：

npm run build

  在这里的是否通过命令行形式安装webpack-cli时，我们选择yes，安装成功后的结果如下所示：

  打开360急速浏览器，在地址栏中输入下面的地址进入扩展程序界面：

chrome://myextensions/extensions/

  在该界面中，点击图示的操作，来安装vue-devtools

  在弹出的安装界面中，选择vue-devtools-dev项目根目录下的shells/chrome，其安装后的界面如图：

  此时我们就可以在浏览器的插件栏中看到vue-devtools-dev图标

vue-devtools的使用

  在使用vue-devtools时，我们以前一篇文章中的源码为例来进行说明：

• Vue中的vue-router

  在启动项目后，在浏览器中通过点击F12来打开浏览器控制台，在控制台中，我们可以查看到已安装的Vue功能选项，如下：

  通过点击页面中的超链接，我们可以在Vue的控制台面板中看到相应的路由地址变化。