Debugging Knockout ViewModels the easy way!

I have found an easy way of debugging all the knockout ViewModels that exist in a page.
Simply add a pre element to your page and position it somewhere that you know will not be covering any other elements.

The below snippet is placed in a partial view. it simply creates a pre element and sets its text data binding to the json value of the root viewmodel.

In the layout page you check whether the application is in debug mode and if it is being run in debug mode then you load and the partial view which contains the jsonified root ViewModel and append it to the layout, this way it does not appear in the live version of the site also having it in the layout means that any page which has a KnockOut ViewModel will have the benefit of having this debugging feature.