How to debug template binding errors for KnockoutJS?

Question

One thing that I do quite often when there is an issue with what data is available at a certain scope is to replace the template/section with something like:

<div data-bind="text: ko.toJSON($data)"></div>

Or, if you want a slightly more readable version:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

This will spit out the data that is being bound at that scope and let you make sure that you are nesting things appropriately.

Update: as of KO 2.1, you can simplify it to:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Now the arguments are passed on to JSON.stringify.

If you are using Chrome for development, there is a really great extension (with which I'm not affiliated) called Knockoutjs context debugger that shows you the binding context directly in the Developer Tools' Elements panel.

Define a bindingHandler once, somewhere in your JavaScript library files.

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( 'Knockoutbinding:' );
        console.log( element );
        console.log( ko.toJS(valueAccessor()) );
    }
};

than simply use it likes this:

<ul data-bind="debug: $data">

Advantages

• Use the full power of the Chrome debugger, like Reveal in Elements Panel
• You don't have to add custom elements to your DOM, just for debugging

I found another one that can be helpfull. I was debugging some bindings and tried using Ryans example. I got an error that JSON found a circular loop.

<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
 <li>
   <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
   <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
 </li>
</ul>

But, using this approach a replaced the data-bind value with the following:

  <ul class="list list-fix" data-bind="foreach: detailsView().tabs">
    <li>
      <pre data-bind="text: 'click me', click: function() {debugger}"></pre>
      <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
    </li>
  </ul>

Now if i click on the PRE element while having the chrome debug window open, I get a nicely filled scope variables window.

Found a little better way for it:

<pre data-bind="text: ko.computed(function() { debugger; })"></pre>

Step by step guide

1. For this guide, we will be using one of the official KnockoutJS examples.
2. Say you want to see the data behind the second contact (Sensei Miyagi).
3. Right-click the first input box of the second contact (the one with the text 'Sensei').
4. Select 'Inspect element'. The Chrome Developer Toolbar will open.
5. Open the JavaScript Console window. You can access the console by clicking the >= icon in the bottom-left of the Chrome Developer Toolbar, or by opening the "Console" tab in the Chrome Developer Toolbar, or by pressing Ctrl+Shift+J
6. Type the following command and press Enter: ko.dataFor($0)
7. You should now see the data that is bound to the second row. You can expand the data by pressing the little triangle left of the Object to navigate the object tree.
8. Type the following command and press Enter: ko.contextFor($0)
9. You should now see a complex object that contains the entire Knockout context including the root and all parents. This is useful when you are writing complex binding expressions and you want to experiment with different constructs.

What is this black magic?

This trick is a combination of Chrome's $0-$4 feature and KnockoutJS's utility methods. In short, Chrome remembers which elements you have selected in the Chrome Developer Toolbar and exposes these elements under the alias $0, $1, $2, $3, $4. So when you right-click an element in your browser and select 'Inspect element', this element automagically becomes available under the alias $0. You can use this trick with KnockoutJS, AngularJS, jQuery or any other JavaScript framework.

The other side of the trick is KnockoutJS's utility methods ko.dataFor and ko.contextFor:

• ko.dataFor(element) - returns the data that was available for binding against the element
• ko.contextFor(element) - returns the entire binding context that was available to the DOM element.

Remember, Chrome's JavaScript Console is a fully functional JavaScript runtime environment. This means that you are not limited to just looking at variables. You can store the output of ko.contextFor and manipulate the viewmodel directly from the console. Try var root = ko.contextFor($0).$root; root.addContact(); and see what happens :-)

Happy debugging!