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



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


*参考



*インストール

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

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

























*使い方

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











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


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















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

















*所感

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



Previous
Next Post »

人気の投稿