by Andreas

KnockoutJS debugging

One of the biggest challenges with KnockoutJS is debugging (to get started with this framework, have a look at an earlier blogpost). Finding out why your bindings don’t work or if your data have been populated can’t be done through normal javascript debugging. It would therefore be very helpful to see all your runtime values at least, and I found a great way to do this on StackOverflow in a reply from this fella. If you are running KnockoutJS 2.0 or earlier, replace or add the following code within the scope of your binding or variable:

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

Or, if you are running KnockoutJS v.2.1 and onwards use this one:

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

 

This will give you a nice JSON formatted dump showing all your variables and their current value:

{
   "userId":"DEGREE\andreas",
   "timeRecords":[
      {
         "Id":1234,
         "Date":"/Date(1348783200000+0200)/",
         "CompanyId":348,
         "CompanyName":"Degree Consulting Group",
         "InternalNotes":""
      }
   ],
   "currentRecord":{

   }
}