vue-devtools调试工具导入浏览器简单教程

vue

前言：

chrome的开发者工具可以说是十分强大了，是web开发者的一大利器，作为我个人而言平时用到的几率很大，相信大家也很常见，但是我们不要仅仅停留在点选元素看看样式的层面上，更要利用它更为强大的功能。比如这期讲到的devtools调试工具就是其中一个强大的体现。

相信用过vue开发的前端大佬们都用过vue-devtools调试工具，它可以帮你快速锁定数据流在哪一个步骤发生错误。下面介绍如何导入并使用。

第一步

首先下载好一个官方devtools的文件。官方文件地址不过官方的devtools文件下载下来是需要下载依赖并编译的，需要很多的操作，伸手党可以直接花几积分下载我处理好的文件，直接安装文件地址

直接导入就可以使用了。有些小伙伴可能没有csdn的积分，可以直接去我的github上下载，免积分安装文件地址(通过此地址下载的小伙伴给个小✨鼓励一下)

如果下载的是第二个或第三个的话，这里假定下载的第二个文件。下载好文件之后打开浏览器点击左上角。如图：

点击浏览器左上角的三个点，找到更多工具–点击扩展程序

点击扩展程序是这样的：（没有这个东西的时候看看右边的开发者模式是否打开）

接下来点击加载已解压的扩展程序，点击加载已解压的扩展程序。

找到下载好的文件，点击选中chrome文件并点选择（此处是mac的界面，win的话稍有不同，大体都一样）。

之后你就可以看到devtools调试工具已经安装好了。

然后重启浏览器，打开F12调试模式你能发现浏览器多了这个东西：（前提是运行了本地的vue项目，线上的项目是没有的）

此时在左边你能找到你在页面写的组件，并能在右边能看到该组件的的state里的数据跟随你不同操作的变化情况，让你掌握数据流的去向与动态，尤其适合数据莫名其妙丢失或者异常的bug查找。

此文章纯粹分享devtools调试工具的资源，希望看到的小伙伴点个小星星支持一下，后期会分享更多干货给大家。