Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
172
Help us understand the problem. What is going on with this article?
@hashimoto-1202

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

More than 3 years have 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を開発に用いているけど、まだ使ったことがない方はぜひ利用してみて下さい!

172
Help us understand the problem. What is going on with this article?
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
a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。 一緒に働けるエンジニアを募集しております。下記URLよりご応募ください。 https://bit.ly/3lwf7QJ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
172
Help us understand the problem. What is going on with this article?