vue调试神器devtools的使用

工欲善其事，必先利其器！

1、下载插件

    官方推荐的仓库从克隆、安装 到编译会遇到各种报错，我直接把编译好的 vue-devtools.crx放在了百度盘上，可直接下载

    插件下载链接：链接: https://pan.baidu.com/s/12WKcFHZJromIdkn6-9U7fA 提取码: 65xh

2、在浏览器地址栏输入：chrome://extensions/    打开浏览器的扩展程序页面，将vue-devtools.crx文件直接拖到页面中，就可以看到多了vue-devtools扩展程序了，如果不行，打开右侧的开发者模式。

 

3、重启下项目，再次在浏览器打开项目，即可看到vue调试工具了

 

4、第一个，可以清楚看到组件的层级关系，并且每个组件的 prop、data、computed、$refs  等数据，都能很清晰看到，并且能修改数据，调试逻辑！

 

5、第二个，vuex

6、第三个工具，事件记录

 7、第四个，路由历史记录

 8、工具的相关设置

 

  好的工具，可以比较好的提升效率！

ps：简单记录，若有不恰当之处，欢迎指正！