【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

Vue.jsで開発するときはvue-devtoolsもね

開発チームの日下部です。
Vueで開発を進める際にあると大変便利なvue-devtoolsをご紹介いたします。

大雑把にいうといちいちconsoleに出力しなくてもdataの中身とかみれるやつです!
vue-devtoolsは、GoogleChromeの拡張機能として提供されていて、簡単に導入することができます。

インストールすれば、あとはVueアプリケーションが搭載されているページを開くだけで、vue-devtoolsがVueアプリケーションを検知してくれます。


検知されると、Chromeウィンドウの右上にあるであろうVueアイコンが点灯します。

その状態でChromeのDeveloper Tools(F12)を開くと、Vueタブが右端に追加されているでしょう。

この記事では、vue-devtoolsで何ができるのかを大まかにご説明していきます。


ご注意

ローカルのhtmlファイルで試す場合は、Chromeの設定->拡張機能 で、vue-devtoolsの[ファイルのURLへのアクセスを許可する]にチェックを入れる必要があります。

 

また、iframe内のVueアプリケーションには、devtoolsが反応してくれないようです。
(本当はJSFiddle等で触って確認できるものを提供したかったのですが、これにより断念)


本題

vue-devtoolsには大きく3つの表示カテゴリがあります。

それらを順番に見ていきましょう。

 

Components

このタブでは、各コンポーネントの親子関係や、それぞれが保持しているdataを確認できます。
コンポーネントの表示名には、親コンポーネントのcomponentsプロパティで設定している子コンポーネント名のアッパーキャメルケースが使われます。

rootに"my-component"として渡した子コンポーネントの詳細を表示している例

単一ファイルコンポーネントを利用している場合は、そのファイル名のアッパーキャメルケースとなります。
コンポーネントのnameプロパティをいじることで、devtools上の表示を変えることができます。

 

Vuex

Vuexを使っているときは、[Vuex]タブを選択することで、storeの中の状態が確認できます。

具体的には、ストア内の各stateの状態、getterで得られる値が表示されます。
また、mutationをcommitした履歴が、時系列順に表示されます。

各commit履歴をクリックすると、その時にmutationに渡した値(payload)、commit後のstate, getterの値が確認できます。
commitを選択すると表示される[Time Travel] (時計アイコン)を押すと、選択しているcommitを行った直後の状態にstateを書き戻すことができます。(実際に画面上の値も変わります)

inspectedラベルがついているのが、現在詳細を表示中のcommitです。
activeラベルは、時系列の中で現在どこにいるのかを表しています。(つまり[Time Travel]で時間を移動すると、移動先がactiveになります)

 

Events

このタブでは、イベントがトリガーされた履歴を確認することができます。

ここでのイベントとは、これのことです。

イベントが$onでリッスンされたかどうかにかかわらず、$emitした履歴が表示されます。

履歴からは、イベントに渡された値(payload)が確認できます。

上の画像の例では、ただ渡された文字列を表示するだけのイベントに"counter is now: 3"という文字列を渡しています。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
1
読み込み中...
1 票, 平均: 1.00 / 11
14,834
X facebook はてなブックマーク pocket
【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author