Vue.jsDevtoolsを使用してコンポーネント、状態、およびイベントをデバッグする方法

提供：Dev Guides
移動先:案内、検索

著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

Vueアプリケーションをデバッグするときは、コードを繰り返し処理してからサーバーを再起動して、ブラウザーでレンダリングされたサイトの問題が修正されたかどうかを確認するのが一般的です。 ただし、ソースコードとブラウザの間を移動するのは時間のかかるプロセスになる可能性があります。 デバッグをより効率的にするために、 Vue.jsDevtoolsのようなブラウザー拡張機能を使用できます。 Vue.js Devtoolsは、ChromeとFirefoxのブラウザー拡張機能であり、Vue.jsコアチームのGuillaumeChauとEvanYouによって作成されたスタンドアロンのElectronアプリです。 開発者にVueアプリケーションの内部動作の視覚的表現を提供し、ブラウザからコンポーネント、データ、計算されたプロパティ、イベント、およびを検査できるようにします。 X223X] Vuexアクション、ゲッター、およびミューテーション。

Devtoolsを使用すると、イベントがいつ実行され、どのペイロードが含まれているかを正確に確認できます。 イベントに加えて、data、 [X182Xなどのコンポーネントプロパティを分析できる、DOMのような形式で表示されるすべてのコンポーネントを表示することもできます。 ]プロパティ、およびprops。

このチュートリアルでは、サンプルのVueアプリケーションをセットアップし、ブラウザーにVue.js DevToolsをインストールしてから、ブラウザー拡張機能を使用してテストしながら、アプリに新しい機能を追加します。 これは、Vue.jsDevtoolsを使用してコードをデバッグするための最初のステップとして機能します。

前提条件

ステップ1—サンプルアプリケーションのセットアップ

このステップでは、後のステップでDevtoolsブラウザー拡張機能を試すために使用できるサンプルアプリケーションをまとめます。 開始するには、 VueCLIを介して新しいVueアプリケーションを生成します。 これを行うには、ターミナルウィンドウを開き、次のコマンドを実行します。 

vue create favorite-airports

Vueアプリのセットアップオプションの入力を求められたら、Manually select featuresを選択します。 次に、Choose Vue version、Babel、およびVuexを選択します。 選択したら、RETURNキーを押して、次のようにプロンプトに入力し続けます。 

OutputVue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

favorite-airportsプロジェクトが作成されたら、ターミナルウィンドウを開き、cdをfavorite-airportsルートフォルダーに移動します。 ディレクトリに変更したら、mkdirコマンドを使用して新しいディレクトリを作成します。 

mkdir src/data

選択したテキストエディタで、data/airports.jsファイルを作成して開き、以下を追加します。

お気に入り-airports/src / data / airports.js 

export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
    abbreviation: 'CVG',
    city: 'Hebron',
    state: 'KY',
  },
  {
    name: 'Seattle-Tacoma International Airport',
    abbreviation: 'SEA',
    city: 'Seattle',
    state: 'WA',
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
    abbreviation: 'MSP',
    city: 'Bloomington',
    state: 'MN',
  },
  {
    name: 'Louis Armstrong New Orleans International Airport',
    abbreviation: 'MSY',
    city: 'New Orleans',
    state: 'LA',
  },
  {
    name: `Chicago O'hare International Airport`,
    abbreviation: 'ORD',
    city: 'Chicago',
    state: 'IL',
  },
  {
    name: `Miami International Airport`,
    abbreviation: 'MIA',
    city: 'Miami',
    state: 'FL',
  }
]

これは、米国内のいくつかの空港で構成されるオブジェクトの配列です。 このアプリケーションでは、このデータを反復処理して、name 、abbreviation、city、およびstateプロパティで構成されるカードを生成します。 このデータを使用して、Vue.jsDevtoolsでイベントとディスパッチを調査します。

airports.jsファイルを保存し、AirportCard.vueという名前の単一ファイルコンポーネント（SFC）を作成します。 このファイルは、プロジェクトのcomponentsディレクトリにあり、エアポートカードのすべてのスタイルとロジックが含まれています。

テキストエディタでcomponents/AirportCard.vueを作成して開き、以下を追加します。

お気に入り-airports/src / components / AirportCard.vue 

<template>
  <div class="airport">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>

<script>
export default {
  props: {
    airport: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.airport {
  border: 3px solid;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.airport p:first-child {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 1rem 0;
}

.airport p:last-child {
  font-style: italic;
  font-size: .8rem;
}
</style>

このコードスニペットにCSSが含まれていることに気付くかもしれません。 AirportCard.vueコンポーネントでは、ラッパー<div>にairportのクラスが含まれています。 このCSSは、各空港に「カード」の外観を与えるために境界線を追加することにより、生成されたHTMLにスタイルを追加します。 :first-childと:last-childは、div内のHTMLの最初と最後のpタグに異なるスタイルを適用する疑似セレクターです。 airportのクラスで。 それに加えて、このコンポーネントには prop が含まれていることに気付くかもしれません。これは、Vue.jsでは親コンポーネントから子コンポーネントにデータを渡す方法です。

ファイルを保存して終了します。

セットアップを完了する前に、既存のApp.vueコンポーネントを次のコードに置き換えます。

お気に入り-airports/src / App.vue 

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    return { airports }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

p,
h3 {
  grid-column: span 3;
}
</style>

このコードには、v-forループが含まれています。このループは、airports.jsデータを反復処理し、プロップ:airportを介して渡された空港データを使用して一連のAirportCard.vueコンポーネントをレンダリングします。 ]。 このコードを保存して、コマンドラインに戻ります。

プロジェクトをセットアップしたら、ターミナルでnpm run serveコマンドを使用してローカル開発サーバーを実行します。 

npm run serve

これにより、localhostで、通常はポート8080でサーバーが起動します。 選択したWebブラウザーを開き、localhost:8080にアクセスして、以下を確認します。

これで、サンプルアプリケーションが正常にセットアップされました。 このチュートリアル全体を通して、このアプリケーションを使用してDevtoolsブラウザー拡張機能を探索します。

次のステップでは、Vue.jsDevtoolsをChromiumおよびFirefoxブラウザーにインストールします。

ステップ2—VueDevtoolsをインストールする

Vue.js Devtoolsを使用する前に、まずプログラムをコンピューターにダウンロードする必要があります。 この手順では、ChromiumベースのブラウザまたはFirefoxにDevtoolsをインストールすることに焦点を当てます。

注：先に進む前に、ステップ1で設定したサンプルプロジェクトがVue.js3を使用していることに注意してください。 つまり、このチュートリアルの公開時にこの最新バージョンのVueでVue.js Devtoolsを使用するには、Vue.jsDevtoolsのベータチャネルバージョンをインストールする必要があります。


Chromiumブラウザへのインストール

Chromiumブラウザを使用している場合は、Chrome拡張機能としてDevtoolsをダウンロードできます。 より一般的なChromiumブラウザーは、Google Chrome、 Microsoft Edge 、およびOperaです。 BraveやVivaldiなどの他のブラウザを使用している場合は、この手順も同様に機能します。

インストールするには、まずChromeウェブストアにアクセスしてください。 左上の検索バーで、「VueDevtools」を検索します。 次の画像に示すように、いくつかの結果が表示されます。

Vue.jsまたは「vuejs-dev」によって提供されるDevtoolsのみをインストールするようにしてください。これらは公式チームによって維持されており、最も信頼できるソリューションです。 アプリはVue3を使用しているため、「vuejs-dev」が提供するBetaチャネルをダウンロードする必要があります。

それをクリックすると、次の画像に示すように、スクリーンショットや概要など、この拡張機能に関する追加情報を表示できます。

準備ができたら、ブラウザの右上にあるChromeに追加ボタンをクリックします。 次に、ブラウザが拡張機能をダウンロードしてインストールします。

Firefoxへのインストール

Mozilla Firefoxを使用している場合は、Firefox ExtensionStoreにアクセスしてください。 ブラウザの右上に検索バーが表示されます。 その中で、次の画像に示すように、「VueDevtools」を検索します。

これにより、 Evan You によって公開されたエントリを含む、多数の検索結果が表示されます。

「EvanYou」の拡張機能をクリックします。 ここから、スクリーンショットや概要など、拡張機能に関する追加情報を表示できます。

Firefoxに追加ボタンをクリックして拡張機能をダウンロードし、ブラウザにインストールします。

注：たとえば、 Safari などのサポートされていないブラウザーを使用している場合でも、npmを介してVue.jsDevtoolsをスタンドアロンのElectronアプリケーションとして使用できます。 VueのDevToolドキュメントには、アプリケーションをローカルまたはリモートでデバッグするためのスタンドアロンアプリとしてのDevtoolsのインストールに関するページがあります。


これで、Devtools拡張機能がブラウザにインストールされました。 固定された拡張機能がブラウザバーに表示されるVue.jsロゴが表示されます。 デフォルトでは、このロゴはグレー表示されます。 ただし、Vueを使用しているアプリケーションまたはWebサイトにアクセスすると、そのロゴはVueロゴの色で色付けされます。

このセクションでは、ChromiumまたはFirefoxブラウザにDevtoolsを正常にインストールしました。 次のセクションでは、アプリケーションのユーザーインターフェイスに飛び込んで、ブラウザーからAirportCardコンポーネントのプロパティを表示します。

ステップ3—Devtoolsインターフェイスを使用してコンポーネントのプロパティを表示する

次に、Devtoolsインターフェイスをナビゲートして、サンプルアプリケーションのコンポーネントのプロパティを調べます。

ステップ1では、localhost:8080のローカル開発サーバーでプロジェクトを開始しました。 ブラウザでそのURLに移動し、右クリックするか、Macの場合はCMD+ALT+Iを、Windowsの場合はCTRL+ALT+Iを使用して、ブラウザの検査ツールを開きます。 インスペクターウィンドウのトップバーに、Vueというタイトルの新しいタブが表示されます。 そのタブをクリックすると、Devtoolsが初期化されます。

Vue.js Devtoolsには、最初はリストビューと詳細ビューの2つのセクションがあります。 リストビューには、VueコンポーネントまたはVuex名前空間のリストが含まれています。 Devtoolsが起動すると、左側にコンポーネントのリストが表示されます。 サンプルアプリケーションには合計6枚のエアポートカードが表示されているため、リストビューにはAppコンポーネントとともに6個のAirportCardコンポーネントが表示されます。

リストビューで、最初のAppコンポーネントを選択します。 詳細ビューには、そのコンポーネントに関する追加の詳細が表示されます。 この場合、App.vueに関連付けられたすべてのdataおよびcomputedプロパティが見つかります。この場合、setupとを表すオブジェクトの配列が含まれます。 airports.jsの空港。

次に、Appのすぐ下にある最初のAirportCardをクリックします。 AirportCard.vueコンポーネントのそのインスタンスに関連付けられているすべてのdataおよびcomputedプロパティがあります。 この場合はCVGカードなので、abbreviation: "CVG"やstate: KYなどのプロパティが表示されます。 このコンポーネントにカーソルを合わせると、Devtoolsはブラウザでレンダリングされたコンポーネントも強調表示します。

このセクションでは、Vueアプリで生成されたコンポーネントのプロパティを確認できるDevtoolsインターフェイスの基本的なナビゲーションについて説明しました。 次のステップでは、Devtoolsを介してVueアプリケーションにいくつかの変更を加えます。 これらの小さな編集で、Devtoolsを使用してコンポーネントへの変更をテストする方法がわかります。

ステップ4—Devtoolsを使用してコンポーネントへの変更をテストする

Vue.js Devtoolsを使用すると、ソースコードを変更することなく、ブラウザーからコンポーネントのプロパティを変更できます。 これにより、実際のコードを調整しなくても、アプリケーションをより迅速にデバッグできます。 このステップでは、AirportCardコンポーネントに条件付きスタイルを追加し、ブラウザーでテストすることにより、この機能を試してみます。

現在、アプリケーションには6つの異なる空港があります。 空港が建設中の場合にカードの色を変更するコードを追加します。 これを行うには、AirportCard.vueコンポーネントに移動する必要があります。 手動で移動することも、Vue.js Devtoolsを利用して、選択したテキストエディタでこのファイルを開くこともできます。

ブラウザで、Devtoolsウィンドウを開いた状態で、開発ツールの右上にある十字線をクリックします。 それをクリックすると、さまざまな空港カードにカーソルを合わせることができます。 Devtoolsは、コンポーネントが選択されていることを示す緑色でコンポーネントを強調表示します。 強調表示されたら、カードをクリックします。

コンポーネントを選択したので、右上にある斜めの矢印の付いた正方形のアイコンをクリックします。 このアイコンは通常、アプリケーションの外部で何かが開かれることをユーザーに通知するために使用されます。 これをクリックすると、エディタでAirportCard.vueが開きます。 コンポーネントファイルを開いた状態で、先に進み、次の強調表示されたコードを追加します。

お気に入り-airports/src / components / AirportCard.vue 

<template>
  <div class="airport">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>
...

これにより、空港オブジェクトのconstructionプロパティ内のデータがレンダリングされます。 これが完了したら、src/data/airports.jsファイルにデータを追加して、空港が建設中であるかどうかを示します。

お気に入り-airports/src / data / airports.js 

export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
    ...
    construction: false
  },
  {
    name: 'Seattle-Tacoma International Airport',
    ...
    construction: false
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
    ...
    construction: false
  },
  {
    name: 'Louis Armstrong New Orleans International Airport',
    ...
    construction: false
  },
  {
    name: `Chicago O'hare International Airport`,
    ...
    construction: false
  },
  {
    name: `Miami International Airport`,
    ...
    construction: false
  }
]

このデータファイルを保存して閉じます。

データをアプリケーションに追加したら、constructionプロパティがtrueの場合、クラスを追加するためのCSSを記述します。 AirportCards.vueコンポーネントを開いて、以下を追加します。

お気に入り-airports/src / components / AirportCard.vue 

<template>
  <div class="airport" :class="{ 'is-under-construction': airport.construction }">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>

<style scoped>
...
.airport.is-under-construction {
  border-color: red;
  color: red;
}
</style>

airportクラスの<div>で、オブジェクトをclass属性にバインドしています。 このオブジェクトのキーは適用されるクラスであり、プロパティはクラスを適用する前に満たす必要のある条件です。 <style>タグのCSSは、クラスis-under-constructionがカードに適用されている場合、カードの境界線とテキストの色を赤に変更します。

次に、ブラウザーを開き、Vue.jsDevtoolsを開きます。 左側のペインで、<App>コンポーネントを強調表示します。 右側の列に、setupメソッドとそのプロパティが表示されます。 airportsの配列があります。 その配列を展開してから、その中のオブジェクトの1つを展開します。 省略形CVGで最初のオブジェクトを開きます。 このコードが機能するかどうかをテストするには、constructionデータプロパティの鉛筆アイコンをクリックして、trueに変更します。

ENTERを押すか、保存アイコンをクリックすると、そのデータがフロントエンドで更新されます。 カードはすぐに赤に変わります。 要素を調べてDOMを確認すると、is-under-constructionクラスが最初の空港カードに適用されていることがわかります。

Devtoolsでプロパティを変更してアプリケーションロジックをテストしたので、次にブラウザから発行されたイベントをテストする方法を確認します。

ステップ5—Devtoolsを使用してイベントエミッティングをテストする

コンポーネントのデータとプロパティのデバッグに加えて、Devtoolsを使用して組み込みイベントとカスタムイベントをデバッグすることもできます。 Vue.js Devtoolsは、イベントとそのペイロードを視覚化するためのツールを提供します。

イベントのテストを試すには、最初にAirportCardコンポーネントにイベントを追加します。 空港カードをクリックすると、アプリはクリックした空港データを使用して親コンポーネント（App.vue）にイベントを送信します。

テキストエディタを開き、AirportCard.vueコンポーネントで、最も外側の<div>に$emitを含む次のclickイベントを追加します。

お気に入り-airports/src / components / AirportCard.vue 

<template>
  <div class="airport" :class="{ 'is-under-construction': airport.construction }" @click="$emit('favorite-airport', airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>
...

最も外側の<div>で、JavaScriptクリックイベントを呼び出しています。 そのclickイベントでは、favorite-airportというカスタムイベントを発生させています。 そのイベントのペイロードは、v-forループからのairport変数に関連付けられたデータです。

AirportCardコンポーネントへの変更を保存します。

次に、ブラウザでVue.jsDevtoolsを開きます。 コンパスアイコン（インスペクター）の右側の上部バーには、タイムラインインスペクターがあります。 アイコンをクリックして、Devtoolsタイムラインを開きます。

このタイムラインインスペクターを使用すると、一定期間に発生するイベント、キーボードストローク、ミューテーションなどを検査できます。 ツールを開いた状態で、ブラウザのビューポートで空港カードの1つをクリックします。 これを行うと、タイムラインに一連のドットが表示されます。

これらのドットは、クリックで実行されたmousedownおよびmouseupイベントなど、舞台裏で発生するさまざまなイベントを表しています。 マウスイベントは常に紫色で強調表示されます。 緑の点は、clickイベントで発生するように設定したカスタムイベントです。 次の画像に示すように、緑色の点をクリックして、そのイベントに関する詳細情報を検索します。

このペインでは、イベントがいつ実行されたか、および親に渡されたデータを確認できます。 この場合、イベントのペイロードは、コードORDのシカゴ空港でした。 これは、イベントが正しく発生したことを示しており、このイベントを引き続き使用して追加機能を開発できます。 次のステップでは、このイベントを使用してペイロードデータをVuexストアに保存し、ユーザーのお気に入りの空港を追跡します。

ステップ6— Devtoolsを使用したVuexアクション、ミューテーション、および状態の表示

Vue.js Devtoolsには、Vuexのアクション、ミューテーション、および保存された状態を監視するために確保された特定のペインがあります。 このビューを使用すると、ソースコードの変更を繰り返すことなく、問題の状態を検査できます。 このセクションでは、Vuexを実装して、ユーザーが空港カードをクリックして追加できるお気に入りの空港のリストを作成します。 次に、Vue.jsDevtoolsを使用してこれらの機能を監視します。

カスタムイベントを作成して実行したら、そのデータを取得して、Vuexアクションとミューテーションを呼び出します。 Vuexに慣れていない場合は、VuexチュートリアルでVuexの詳細を読むことをお勧めします。

テキストエディタで、src/store/index.jsファイルを開き、次のコードを追加します。

お気に入り-airports/src / store / index.js 

import { createStore } from 'vuex'

export default createStore({
  state: {
    favorites: [],
  },
  mutations: {
    UPDATE_FAVORITES(state, payload) {
      state.favorites = payload
    }
  },
  actions: {
    addToFavorites({ state, commit }, payload) {
      const airports = state.favorites
      airports.push(payload)
      commit('UPDATE_FAVORITES', airports)
    }
  }
})

このスニペットでは、ステップ1で生成されたindex.jsファイルに追加しています。 具体的には、favorites状態プロパティ（airports.jsオブジェクトの配列）、UPDATE_FAVORITESと呼ばれるmutation、およびactionを追加します。 addToFavoritesと呼ばれます。 その目的は、ユーザーがカードをクリックすることです。これにより、アクションが実行され、ミューテーションが実行され、ストアが更新されます。

App.vueコンポーネントに、カスタムfavorite-airportイベントの実行時にactionをディスパッチする次のコードを追加します。

お気に入り-airports/src / App.vue 

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    return { airports }
  }
}
</script>
...

Vuexプロパティを追加したら、ブラウザを開いてDevtoolsを開きます。 ペインの上部にあるComponentsドロップダウンに、Vuexオプションがあります。 クリックしてVuexビューに切り替えます。

コンポーネントセクションと同様に、左側のパネルは状態ツリーを視覚化したもので、名前付きモジュールとルート状態が含まれています。 右側には、Vuex状態のそのモジュールまたはセクションのデータの完全なリストがあります。

右側のパネルに、favoritesの空の配列があります。 次に、いくつかのカードをクリックして、各空港オブジェクトがその配列にプッシュされるのを確認します。

状態が機能していることがわかったので、App.vueファイルにセクションを追加して、これを拡張できます。

お気に入り-airports/src / App.vue 

<div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
    </div>

  <div v-if="$store.state.favorites.length">
    <h1>Favorites <template v-if="$store.state.favorites.length">({{ $store.state.favorites.length }})</template></h1>
    <div v-for="airport in $store.state.favorites" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</div>
...

ファイルを保存し、ブラウザでカードをクリックします。 追加された空港のカードを含む新しいセクションが表示されます。

結論

Vue.js Devtoolsは、ChromiumまたはFirefoxブラウザに追加できる無料のブラウザ拡張機能です。 また、ダウンロードして、アプリケーションに関連付けることができるスタンドアロンアプリケーションとしてダウンロードすることもできます。 このチュートリアルでは、それぞれが独自のデータを持つ多数のカードコンポーネントをレンダリングするデータセットからアプリケーションを構築しました。 次に、Devtoolsを使用してコンポーネントのプロパティを調べ、プロパティを変更して条件付きスタイルの変更をテストし、イベントが適切に発生するかどうかをテストし、Vuex状態管理が正しく設定されていることを確認しました。

Vue.js Devtoolsの詳細については、公式のVueDevToolsドキュメントにアクセスしてください。 Vueのその他のチュートリアルについては、Vue.jsシリーズページを使用してWebサイトを開発する方法を確認してください。

「https://www.finddevguides.com/index.php?title=Vue.jsDevtoolsを使用してコンポーネント、状態、およびイベントをデバッグする方法&oldid=104858」から取得
Powered by MediaWiki