Vue Devtoolsのインストール
今日はVue.jsのお勉強。「基礎から学ぶ Vue.js」を読んでます。
(p.36) 学習用のひな形ファイルを用意
↑上記のような「index.html」「main.js」を作って、Chromeで開き、コンソール画面を見ると、以下のようなメッセージが表示されていました。
vue.js:8542
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:8553
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
「Vue Devtools」って何だろ？と思い、検索してみました。
Vue Devtoolsは、Google Chromeの拡張機能（プラグイン）でした。
これを使うと、Vue.jsで開発するとき、デバッグが楽になるようです。
…というわけで、さっそくインストールしてみました。
拡張機能の設定画面で「ファイルのURLへのアクセスを許可する」にチェックを入れておきます。
拡張機能を追加したら、拡張機能の設定画面を開き、「ファイルのURLへのアクセスを許可する」にチェックを入れます。
これをチェック入れていないとローカル環境で開発を進めている時にVue.js Devtoolsが使えないので必ずチェックしましょう。
Chromeのデベロッパーツール画面を開くと、新たに「Vue」という項目が増えていました。
これでVue.jsのデバッグを便利にする準備が整いました。
いろいろなサンプルWebアプリを動かして、動作を観察してみたいと思います。
