knockout.jsでバインディング・コンテキストの値をデバッガで確認する方法

近年のフロントエンド界隈では、Knockout.jsはあまり話題に上らなくなっちゃいましたね。。。
ですが、自分は以前Knockout.jsで書いてたプロジェクトを弄ったりと、今でも結構使ってます。

あと、なんだかんだ言って、双方向データバインディングだけあれば十分ってケースでは、 Knockout.jsのシンプルさは今でも魅力的ですしね。

で、Knockout.jsを使ってHTML上でバインディング定義をしていると、
要素のコンテキストがどんな値になっているか、、、を確認したくなる時がちょくちょくあります。

ちなみに、Chrome用では↓こんな便利な拡張機能があります。
http://qiita.com/sasaplus1/items/8c5a2216f3cb15b792c5
https://chrome.google.com/webstore/category/extensions?hl=ja

でも、拡張機能などを使わなくても、ブラウザの開発者ツールを活用してお手軽に確認することもできます。

手順

1. 開発者ツールを開いて、DOM Explorer的なヤツから、目的のDOM要素を選択します。
2. 続いて、コンソールを開き、以下のコマンドを実行します。

Ko.contextFor($0)

するとこんな風に、コンテキストに設定されているオブジェクトの値を確認できます。

ここでは、Edgeでやっていますが、IE11, Chrome, Firefoxなどのブラウザでも、だいたい同じような手順で確認できます。