How to see the real-time state of your view-model

When testing and debugging your web-application, its convenient to see the real-time state of the view-model. This is very easy when you’re using a data-binding framework such as knockout. You can simply bind the JSON representation of the view-model to some visible DOM element, like this:

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

Sometimes, the objects in your view-model might have circular dependencies, like this:

//The ViewModel
var CurrencyViewModel = function () {
    var self         = this;
    this.DataContext = new CurrencyDataContext(this);
    this.Name        = ko.observable();
    ...
}
//The pseudo-model behind the ViewModel
var CurrencyDataContext = function CurrencyDataContext(ViewModel) {
    var self = this
    this.Viewmodel = ViewModel
    ...
}

In that case you’ll get the following error:
0x800a13aa - JavaScript runtime error: Circular reference in value argument not supported
You can fix this by overriding the toJSON() method, like this:

var CurrencyDataContext = function CurrencyDataContext(ViewModel) {
    var self = this
    this.Viewmodel = ViewModel
    ...
    //Needed to avoid circular reference when a viewModel is serialised into JSON
    CurrencyDataContext.prototype.toJSON = function ()
    {
        var copy = ko.toJS(self);
        delete copy.Viewmodel
        return copy;
    }