Vue 应用程序是写的乐趣,并且往往是相当容易调试的。但是你知道什么会使调试更好吗? 一个专门的方法来连接到 Vue 应用程序并从浏览器的开发工具中操纵它们。
Vue有一个优质的Chrome(和Firefox,类似的)扩展,允许检查组件树,审查事件,以及Vuex状态的时间旅行调试。
安装
** 对于 Chrome:** Vue 开发工具可以从 Chrome Web Store中安装。
对于Safari: 描述了在 Vue Devtools Wiki上安装Safari中的扩展程序的解决方案。
组件树
开发工具为您的应用程序中的所有组件提供 DOM 风格的树形概述,并在细节窗格中提供有关每个组件的数据、属性、计算属性和 vuex 连接的信息。
时间旅行调试
开发工具最有用的功能是使用Vuex的应用程序进行时间旅行调试,它允许您随时间观察,逆转和平滑您的Vuex商店,您可以使用此功能恢复到以前的状态,重播事件以获得错误的第二眼,或检查在细节窗格中完成Vuex商店的工作的各种移动部件。
事件日志
事件窗格可访问应用程序中的所有组件发出的所有事件,以及它们的名称、来源和负载。
享受你新发现的调试能力!(除非你已经知道它,在这种情况下......好......对不起失望。