More than 5 years have passed since last update.

なるはや Vue SPA入門：Vue.js devtools

Last updated at 2019-07-19Posted at 2019-07-19

Vue CLI3 で作成した SPA（Single Page Application）プロジェクト上で、段階的に Vue.js を学んで行きましょう。

今回は Vue.js devtools 編です。

前提事項

コンポーネント編が完了していること。

Vue での開発で便利なツール Vue.js devtools を紹介します。Chrome ブラウザの拡張機能として提供されています。Chrome ウェブストアからインストールすることができます。

インストールが完了し、Chrome のメニューからデベロッパーツールを表示するとVueのタブが追加されています。

devtools では以下の項目を画面で見ることができます。

上の画像では前回作成した Todo リスト画面を表示しています。devtools では TodoListItem コンポーネントを閲覧しています。

あとは色々動かして見てみてください。