【Vue.js】Vuejsをchromeブラウザでデバッグする方法

開発環境
⭐️Mac book pro (Mac OS Mojave)
⭐️ブラウザ　Google Chrome

https://twitter.com/nonnonkapibara/status/1166711295384510465

⛱️Vue.js⛱️CodePen⛱️
Vue.jsをCodePenで実装してみたよぉ。
CDN（インターネット経由）でできるので、めっちゃ便利♪♪https://t.co/z92om6dOAu pic.twitter.com/FrcWwWINq0

— non (@nonnonkapibara) August 28, 2019

Vuejsをchromeブラウザでデバッグする方法

1.Chromeのアドオン「Vue.js Devtools」を入れる。
Vue.js Devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

2.インストールが終わったらVue.js Devtoolsのアイコンを右クリックして「拡張機能を管理」を開く

3.「Vue.js Devtools」ONにして、「ファイルのURLへのアクセス許可する」をONにする

main.jsの上部に

Vue.config.devtools = true;

を追記する

4.Vue.jsページをChromeで開くと、Vue.js Devtoolsアイコンが有効になる。緑色がつく。

5.画面の右クリックで「検証」を選ぶ

6.上のタブに「Vue」が追加されているので、選択する

7.データの内容が見る事ができた。

こんな感じにデバッグできる。

完了