Vueアプリは書くのが楽しく、デバッグもかなり簡単です。 しかし、何がデバッグをより良くするか知っていますか? Vueアプリに接続し、ブラウザーのdevtoolsからそれらを操作するための専用の方法。 何? そのようなものはすでに存在しますか? おー。 じゃあ。 私たちは今それについて書かなければならないと思いますね。

Vueには、コンポーネントツリーの検査、イベントのレビュー、Vuex状態のタイムトラベルデバッグを可能にする高品質のChrome(およびFirefoxの一種)拡張機能があります。 これらの機能により、かなり大きなアプリの場合でも、デバッグが途方もなく簡単になります。

インストール

Chromeの場合:VuedevtoolsはChromeウェブストアからインストールできます。

Safariの場合:Safariに拡張機能をインストールするための回避策がVue DevtoolsWikiに記載されています。

コンポーネントツリー

devtoolsは、アプリ内のすべてのコンポーネントのDOMスタイルのツリー概要を提供し、詳細ペインに各コンポーネントのデータ、プロパティ、計算されたプロパティ、およびvuexバインディングに関する情報を提供します。

Vue.js Devtools: Component tree pane.

タイムトラベルデバッグ

devtoolsの最も便利な機能は、Vuexを使用したアプリのタイムトラベルデバッグです。 それはあなたが時間をかけてあなたのVuexストアを観察し、元に戻し、そして平らにすることを可能にします。 これを使用して、以前の状態に戻したり、イベントを再生してバグを再確認したり、詳細ペインでVuexストアを機能させるためのさまざまな可動部分を調べたりすることができます。

Vue.js Devtools: Vuex pane.

イベントログ

[イベント]ペインでは、アプリ内のコンポーネントによって発行されたすべてのイベントと、それらの名前、ソース、およびペイロードにアクセスできます。

Vue.js Devtools: Event pane.

新しく見つけたデバッグ力をお楽しみください! (あなたがすでにそれについて知っているのでない限り、その場合…まあ…失望させて申し訳ありません。)