Installing the Knockout context debugger extension

In the previous chapters, you created a simple debugger to show the state of your view-model. This is very useful to see the state of our application quickly. With the debug binding, you don't need to open the extension tools to check what is happening to your data. But you often isolate just a part of the application or see what is happening with the models bound to a DOM element.

In Google Chrome, you have a very good extension called KnockoutJS context debugger, which can be downloaded from https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof.

This extension allows you to view the bindings of each DOM node and trace online the changes in your view-model through the console. Install it and restart the Chrome browser.

Check in chrome://extensions whether KnockoutJS context debugger has been installed

To check the context bound to your models, open Chrome Developer Tools by pressing F12...