Help us understand the problem. What is going on with this article?

ナマケモノの僕がよく使うVue.jsの簡単なデバッグ方法4選

More than 1 year has passed since last update.

Vue.jsで、値をリアルタイムに見ていくのが大変なので、簡単なデバッグ方法について書いていきます。

console.logを使う(簡単度☆)

let hoge = 'test'
let fuga = 'test2'

// 何かしらの処理

console.log(hoge);
console.log(fuga);

// 何かしらの処理

hoge = this.getHoge();

console.log(hoge)
console.log(fuga);

console.log('hoge')を入れます。

簡単ですが、見たい変数が多いと大変です。

debuggerを入れる簡単度☆☆

let hoge = 'test'
let fuga = 'test2'

// 何かしらの処理

debugger;

// 何かしらの処理

hoge = this.getHoge();


debuggerをソースに入れて、Chromeディベロッパーツールで、ブレークポイントを貼って、ステップ実行しながら変数の中身をみます。

コンパイルされたVue.jsのファイルはとても長く、見たい場所まで行くのが大変です。
ディベロッパーツール上でブレークポイントを貼るのは、手間です。

ソース上にdebuggerを入れることでブレークポイントを入れて、ディベロッパーツールで、ポチポチと追加ブレークポイントを入れて行くこともできます。

ただ環境によるかもしれませんが、Vue.jsで実行しているとステップ間の時間がかかって大変な場合があります。
f10連打がつらいです。

devtoosを使う簡単度☆☆☆

Chrome拡張のVue.js devtoolsを使います。

変数の中身を見るのがとても便利です。
ただ、Componentの親子関係がたくさんあると、ポチポチポチして見たい階層にいくのが、大変なときがあります。

Vue.js devtools

watchを使う 簡単度☆☆☆☆☆

Vue.jsのwatchを使って、リアルタイムに変数の変化を見ます。

watch: {
 hoge: function () {
   console.log('hoge dump')
   console.log(this.hoge)
 },
  fuga: function () {
   console.log('fuga dump')
   console.log(this.fuga)
  }
}

見たい値が決まっていて、操作によっていろいろ変わるならこれが簡単だと思います。

最初書くの大変ですが、リアルタイムに見れるのでものぐさな方にはおすすめです。

まとめ

状況に応じて使い分けましょう。

yoshinyan
Webアプリケーションエンジニア。 PHP/Laravel/JavaScript/Vue.js/Ruby/Rails
https://yoshinyan99.hatenablog.com/
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
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