74
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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

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




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

1.Chromeのアドオン「Vue.js Devtools」を入れる。
Vue.js Devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
スクリーンショット 2019-08-29 18.52.46.png

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

3.「Vue.js Devtools」ONにして、「ファイルのURLへのアクセス許可する」をONにする
スクリーンショット 2019-08-29 18.56.51.png
スクリーンショット 2019-08-29 18.57.30.png

main.jsの上部に

Vue.config.devtools = true;

を追記する
スクリーンショット 2019-08-31 1.51.26.png

4.Vue.jsページをChromeで開くと、Vue.js Devtoolsアイコンが有効になる。緑色がつく。
スクリーンショット 2019-08-29 18.59.51.png

5.画面の右クリックで「検証」を選ぶ
スクリーンショット 2019-08-29 19.01.15.png

6.上のタブに「Vue」が追加されているので、選択する
スクリーンショット 2019-08-29 19.02.27.png

7.データの内容が見る事ができた。
スクリーンショット 2019-08-29 19.04.10.png

こんな感じにデバッグできる。
スクリーンショット 2019-08-31 1.54.45.png

完了

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
Sign upLogin
74
Help us understand the problem. What are the problem?