摘要：分享一些我在工作中常用到的工具。今天分享的工具跟Vue项目相关，Vue Devtools是一个Chrome浏览器插件。使用它可以帮助我们快速定位和分析问题，让我们在调试过程中少走弯路！

今天要分享的是一款跟Vue项目有关的调试工具 -- Vue Devtools。

一、它有什么作用？

它给我带来最大的便利就是：可以帮我快速定位和分析问题，少走弯路！

1.1、案例一：看到的值 ≠ 请求接口的值

页面中有一个根据创建时间进行搜索的功能。选择时间范围后点击搜索按钮，请求接口后会返回相关数据。

在不看控制台的情况下，是不是会觉得自己传给后端的值就是眼睛看到的2022-09-22和2022-09-27？

来，上图！

看完图后是不是傻眼儿了？

页面中“创建时间”那里明明显示的是2022-09-22至2022-09-27。但请求中传入的值是2022-09-21T16:00:00.000Z！？这是什么鬼？？？

有经验的看官能一眼知道问题所在，主要原因是Element-UI库自身的问题。有点儿剧透了哈。

如果看官没有经验，那也没事儿。先想办法找到原因，再找解决方案。

那怎么办呢？

这个时候借助Vue Devtools插件便可快速找到原因。如下图↓↓↓

看到了吧，这里的valueOnOpen的值是有问题的！

解决的方案也很简单，在相关页面中找到DatePicker日期选择器组件，添加value-format="yyyy-MM-dd"属性即可。如下图↓↓↓

怎么样？通过刚才的例子，是不是不再那么相信自己写的代码了？

为了文章素材，一不小心我又发现了一个Bug！[:笑哭]

1.2、案例二：快速查看页面由哪些组件构成

如果你想看页面上有哪些组件构成，也是可以的。特别是在组件嵌套的情况下，可以快速定位。如下图↓↓↓

1.3、案例三：调试数据更方便

页面上一个选择性别的功能，如下图↓↓↓

问题来了，选择“男”时的值是多少呢？是数字类型还是布尔类型？

通过Vue Devtools插件，我们可快速知道结果。gif动态图如下↓↓↓

现在我们知道了，勾选“男”时，sex的值为"1"，勾选“女”时，sex的值为"2"。既不是我们之前猜想的数字类型，也不是布尔类型，而是字符串数字类型。

更多案例我就不一一列举了，反正，用它就没错，绝逼可以节省你查找问题的时间！

二、下载Vue Devtools

工具很小，Vue2版只有几百KB，Vue3版的有2MB，下载地址见下方↓↓↓

1. Github仓库访问可能会比较慢
2. 本站：下载Vue2版本
3. 百度网盘：提取码: g7ht，下载Vue3版本

三、安装Vue Devtools

正常情况下，看官按照下方3个步骤即可成功安装。

1. 下载后解压压缩包，里面有一个.crx后缀的文件。
2. 打开Google Chrome浏览器，点击右上角的【三个点】，接着点【设置】，接着点【扩展程序】。
   或者直接在浏览器中输入chrome://extensions/并回车。（图见下方。）
3. 拖拽刚解压的.crx文件到浏览器即可。

安装流程图↓↓↓

3.1、安装失败该咋整？

部分看官可能会出现安装失败的情况，不要慌，一步步来。

1. 先把.crx后缀换成.zip
2. 再解压刚才改名的压缩包
3. 再点击【加载已解压的扩展程序】，选择解压后的目录即可。

安装流程图↓↓↓

至此，我们已经实现了安装流程，下面说一下如何使用。

四、调试

4.1、调试本地开发环境

现在我们可以在本地跑一个用Vue开发的项目，在Chrome浏览器中按下快捷键F12打开控制台，此时会看到多出一个Vue的标签页。如下图↓↓↓

有时可能看不到这个Vue标签页，解决的方法也很简单：关闭浏览器或新开一个窗口，再访问本地项目即可。

4.2、调试线上环境

什么？线上环境中也能使用？

确实，但需要做一下小小的配置才行。

打开main.js文件，在最末尾的地方添加下方这一行代码。重新打开项目并上线，此时线上项目也能使用这个功能了。如下图↓↓↓

...... // 省略若干代码
Vue.config.devtools = true // 强制开启（线上环境中也能使用）

一般情况下，我们只需要在本地开发中使用Vue Devtools进行调试，线上环境中不推荐开启。毕竟开启后更容易让别人发现你写的代码。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2022-09-23/tool-sharing-vue-devtools.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。