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の親子関係がたくさんあると、ポチポチポチして見たい階層にいくのが、大変なときがあります。
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)
}
}
見たい値が決まっていて、操作によっていろいろ変わるならこれが簡単だと思います。
最初書くの大変ですが、リアルタイムに見れるのでものぐさな方にはおすすめです。
まとめ
状況に応じて使い分けましょう。