Help us understand the problem. What is going on with this article?

Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう!

More than 1 year has passed since last update.

最近、JavaScriptフレームワークであるVue.jsの勉強をしているのですが、jQueryを用いて開発を進めるときと比べるとデバックに時間がかかってしまいます。

何か良い解決策を探してみると「Vue.js Devtools」というchromeブラウザの拡張機能の存在を知りました。

早速導入してみると、 作業がとても捗った ので、導入方法や使い方を簡単にまとめたいと思います。

Vue.js Devtoolsとは

Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能 です。これを導入するとconsoleを開かなくてもdataの中身などを確認することができるようになります。

Vue.js Devtoolsの導入方法について

それではさっそくVue.js devtoolの導入方法について。まずは下記URLにアクセスして拡張機能を追加します。
Vue.js Devtools/Chrome ウェブストア

2017-08-01_131142.png

拡張機能を追加したら、拡張機能の設定画面を開き、「ファイルのURLへのアクセスを許可する」にチェックを入れます。

これをチェック入れていないとローカル環境で開発を進めている時にVue.js Devtoolsが使えないので必ずチェックしましょう。

2017-08-01_130228.png

これで、Vue.jsを読み込んでいるファイルをブラウザ上で開くと、Vue.js Devtoolsのアイコンがアクティブになります。ここまできたら導入完了!

2017-08-01_130630.png

デベロッパーツールを開くと、vueというタブが追加されていますね!
2017-08-01_130411.png

Vue.js Devtoolsの機能について

ここからは簡単にVue.js Devtoolsの機能を紹介。このツールを用いて確認できる内容は下記3つ。

  • Components
  • Vuex
  • Events

Componentsタブでは、各コンポーネントの親子関係や保持しているdataの内容などを確認することが可能になります。

次にVuexタブ。このタブではVuexを使っている場合、storeの中の状態を確認することが可能になります。

最後にEventsタブ。このタブをみるとイベントがトリガーされた履歴を確認することが可能になります。

まとめ

簡単に Vue.js Devtools の導入方法や機能についてまとめてみました。

実際に使ってみるとconsoleを記述してdataの中身を確認する手間が省けると、デバックがとても快適になると思います。

Vue.jsを開発に用いているけど、まだ使ったことがない方はぜひ利用してみて下さい!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした