Simplify Knockout debugging in Chrome/FF/IE dev tools.

[Derek Pinkerton]

One thing that bugged me about KnockoutJS from day one is that while debugging in the Chrome developer tools instead of seeing the values of your observables you instead see the actual KnockoutJS function instead. To make life easier while debugging I add the following code to one of my JavaScript files included in the page somewhere AFTER knockout is included. This small block of code overrides the toString method on all types of observables and instead of returning the function declaration, we return the observable's current value. 

ko.subscribable.fn.toString = function () {

    return this();

};

This makes debugging far simpler, however I would recommend against leaving this in your code while you are not debugging. Leaving this in could result in accidentally creating bindings in your html markup that bind to this toString method's result instead of the actual observable. This would result in a binding that never gets updated and may be very difficult to figure out why.

[Derek Pinkerton]

This can help when inspecting a view model with many observables on it. If you need to view the values for more than one item, instead of having to call each of the observables as a function on the console, you can now hover over the view model and the Chrome dev tools popup will display the actual values. See attached screenshot for an example.

[Brian Zengel]

I think there is a _latestvalue already attached to every observable. You could use that instead. Its easy to miss unless you dig. Also its undocumented so i wouldnt use it for anything but debugging.

-Brian

[Derek Pinkerton]

Yes but that won't give you the benefit of not having to manually type something in to the console to check the value. With this code added the dev tools will natively show you the current value. 

For example:

var MyObj = (function () {

  this.someProp = ko.observable();

  this.someOtherProp = ko.observable();

})();

var items = ko.observableArray([new MyObj(), new MyObj()]);

In the above scenario, the Chrome developer tools will not automatically show you that items is in fact an array that contains to values. You would need to enter items() on the console to see that. Even if you did expand it in this manner, the resulting display in the console will have arrows to expand the individual array elements. Once expanded you will see the two properties on each of the array elements, but again you cannot see their current values. Instead Chrome will display "function...". 

With the toString method in place once type "items" into the console you will see all array elements and you will be able to expand them and see the current values of the observables on each of the objects in the array, without having to type "items()[0].someProp()".

Derek