Inspect Knockout Contexts with Eclipse and IDEA

Since version 1.2 of the API, there’s a visual debugger available also for Eclipse and IDEA. Here’s some info how to activate the inspector ( which is firebug-lite ).

You’ve seen how to use it for inspecting the DOM and the CSS for the elements. Another thing you can do with it is inspect the knockout context. As an example we’ll use the “helloworld” application created from the basic archetype. When the application is running launch firebug-lite. In the console type this and confirm:

{lang=”javascript”} ~~~~~~~~~ model = ko.dataFor(document.body); ~~~~~~~~~

This will give you the knockout context of the body element.

As a result an Object will be shown in the firebug-lite window that represents the model.

Clicking on the result Object will open the DOM tab with the model. You can now inspect the values of our knockout model.

You can also work with the model and invoke functions on it. For example type this:

{lang=”javascript”} ~~~~~~~~~ model.turnAnimationOn(); ~~~~~~~~~

The function of our Java based model will be called and the elements start to rotate.