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:简单记录,若有不恰当之处,欢迎指正!

本文链接http://element-ui.cn/article/show-153825.aspx