使用 Vue.js 开发工具

Vue 应用程序是写的乐趣,并且往往是相当容易调试的。但是你知道什么会使调试更好吗? 一个专门的方法来连接到 Vue 应用程序并从浏览器的开发工具中操纵它们。

Vue有一个优质的Chrome(和Firefox,类似的)扩展,允许检查组件树,审查事件,以及Vuex状态的时间旅行调试。

安装

** 对于 Chrome:** Vue 开发工具可以从 Chrome Web Store中安装。

对于Safari: 描述了在 Vue Devtools Wiki上安装Safari中的扩展程序的解决方案。

组件树

开发工具为您的应用程序中的所有组件提供 DOM 风格的树形概述,并在细节窗格中提供有关每个组件的数据、属性、计算属性和 vuex 连接的信息。

Vue.js Devtools: Component tree pane.

时间旅行调试

开发工具最有用的功能是使用Vuex的应用程序进行时间旅行调试,它允许您随时间观察,逆转和平滑您的Vuex商店,您可以使用此功能恢复到以前的状态,重播事件以获得错误的第二眼,或检查在细节窗格中完成Vuex商店的工作的各种移动部件。

Vue.js Devtools: Vuex pane.

事件日志

事件窗格可访问应用程序中的所有组件发出的所有事件,以及它们的名称、来源和负载。

Vue.js Devtools: Event pane.

享受你新发现的调试能力!(除非你已经知道它,在这种情况下......好......对不起失望。

Published At
Categories with 技术
Tagged with
comments powered by Disqus