Knockoutjs context debugger

  • 3
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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

Knockoutjs context debugger

https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof

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

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

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

Knockoutjs context debugger