Vue.js のデバッグにdevtoolを使ってみました

Vue.jsを使ってWebアプリを作っていたのですが、処理がうまくいかずデバッグをしようと試みたところ、devtoolというchromeの拡張機能があるようだったので試してみました。

---

＊参考

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

---

＊インストール

下記サイトにアクセスし、拡張機能にVue.js devtoolを追加します。

• Vue.js devtools

chromeの拡張機能の設定でVue.js devtoolsの詳細をクリックし、
「ファイルの URL へのアクセスを許可する」をオンにします。

---

＊使い方

デベロッパーツールを開くと上部のタブの最後に「Vue」が追加されているのでクリックします。

• Components
  Formなどに格納されているデータの中身を確認することができます。

• Vuex
  Vuex とは Vue.jsアプリケーションの状態管理をするライブラリです。この storeの中身を見れる機能なのですが、今回は使っていないので省略します。

• Events
  画面のボタンを押すなどの、イベントがトリガーされた履歴をみることができます。

---

＊所感

Componentsでデータの中身が見れるので、console.logで値を出力しなくても確認ができるので非常に便利でした。また、Eventsでpayloadの中身が確認できることもデバッグに大いに役立ちました。
今後Vue.jsを使う場合は、このdev toolsを使ってデバッグをしていこうと思います。

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email