最近Knockout.jsを使っているのだけど、data-bindを書いた要素のコンテキストがよくわからなくなることがある。で、console.logとかを仕込んで確認とかしていたのだけどなかなかに面倒なので何か良い方法はないかなーと探していたら良いChrome拡張があった。

Knockoutjs context debugger

Knockout.jsを読み込んでいるページで、DevToolsを表示してdata-bindが書いてある要素（もしくはVirtualElement）を選択した状態でStylesとかComputedタブがあるところにKnockout contextというタブが追加されているのでそれを選択すると、データが見れる。

observableのプロパティは展開された値が、observableArrayのものは配列として中身が見れるようになってるっぽい。あとは他に$dataとか$indexとか$parentsとかいろいろなコンテキストがそのまま見れるのでとても捗る。

以下のスクリーンショットは http://codepen.io/sasaplus1/debug/iJaew で試してみたやつ。