仕事でJavaScriptをよく触るのだが、その内容の多くはバグを探しては修正していく管理運用だ。
バグは当然、どこに隠れているかわからないので、それを探すのはとてもしんどい。
そんなだるいデバッグ作業を少しでも効率化するために日々やっていることがあるので、書いていくことにする。
ObjectはJSONにしてログをとる
ChromeDevToolsなどを使用してログを取っていると、まれにオブジェクトのログを吐き出した時、 その直後すぐに値が変わるとなぜか過去のログも連動して値が変わってしまう謎の現象が起こることがある。
これが、値がいつ変わったのかを監視しながらデバッグしているときは本当に困ってしまう。
これを回避する策としてJSON.stringifyを使って文字列にしてログを吐き出させるという方法を使っている。
こうすることでコンソール上でもObjectとの参照が完全に切れるので、正確なObjectの状態を知ることができる。
変数への代入を監視する
非同期処理などにより、いつ特定の変数に値が入れられたかがわからなくなる時がある。 一体誰がその変数を書き換えて、誰が読んでいるのかというのを調べるのは、そう一筋縄にはいかない。
僕がよくやる方法としては、Object.definePropertyを使う方法だ。これを使うことで、すでに定義されている変数にgetter/setterを埋め込むことができる。
用例はこの通り：
const value = { x: 10 };
Object.defineProperty(value, "x", {
set: v=>( console.log("<set>=",v), console.trace() ),
get: v=>( console.log("<get>") , console.trace() ),
});
このようにすることで、value.xに代入しようとするとsetの処理が動作し、参照しようとするとgetの処理が動作する。
さらにconsole.traceを使うことで、どこで代入や参照が行われたかを追跡することができる。
ひとまずこんな感じだ。また思い出したら書く予定。