Vue Devtools的安装与使用

喜欢ヅ旅行 2022-04-22 11:18 244阅读 0赞

### 文章目录 ###

*  Vue Devtools的GitHub官网地址
 *  安装 Vue Devtools
 *   *  通过浏览器插件安装
     *  通过源码安装
 *  vue-devtools的使用

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

# Vue Devtools的GitHub官网地址 #

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

*  [vue-devtools][]

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

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

# 安装 Vue Devtools #

## 通过浏览器插件安装 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]

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

`Chrome`浏览器插件下载地址：

*  [Chrome Extension][]

其解压后的文件为：

vue devtools.crx

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

![在这里插入图片描述][20181106102223608.png]

## 通过源码安装 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 1]

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

cnpm install

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 2]

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

npm run build

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 3]

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

chrome://myextensions/extensions/

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 4]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 5]

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

![在这里插入图片描述][20181106120116589.png]

# vue-devtools的使用 #

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

*  [Vue中的vue-router][Vue_vue-router]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 6]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 7]

[vue-devtools]: https://github.com/vuejs/vue-devtools
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]: /images/20220422/392ea6943382429ea6e461a73827827e.png
[Chrome Extension]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
[20181106102223608.png]: /images/20220422/39b55a8faae44c8ea4244962a51c350e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 1]: /images/20220422/94c6d779c1ce441b956564a0596316f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 2]: /images/20220422/613cf25d8d7347a2a69969c755ddbd45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 3]: /images/20220422/21799cd27d804da28c1fe9d12b01a5e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 4]: /images/20220422/f16e4dfda6c545d8b699377f12d749ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 5]: /images/20220422/f49b3791d44644fd94965b4c4618b9b4.png
[20181106120116589.png]: /images/20220422/1ac8c1c53877421d86c8d4a3390e8f6f.png
[Vue_vue-router]: https://blog.csdn.net/ZZY1078689276/article/details/83717433
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 6]: /images/20220422/6d6e64f3fae74390950cf385de4deaff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 7]: /images/20220422/e5be2ad826854787856b58b3e93d8af0.png