How do people inspect and debug their view model?

[paradox]

Hey,
I'm new to knockout.js, but quite like it. However, as my view model
gets more and more complex, I'm finding it increasingly difficult to
debug and inspect. At the moment I am having problems with loading a
view model from JSON and figuring out what is happening to my
observables, dependent observables, etc. I want to get some feedback
from the experts, on how they inspect and debug their view model.

I started off with log4javascript, and just using ko.toJSON(), like
so:

log.debug("View model: " + ko.toJSON(viewModel));

This works for a tiny view model, but the output is unformatted, so it
soon gets hard to read.

Firebug, has a very nice console API, which allows you to inspect
objects. Currently I am doing:

console.group("Dumping view model");
console.dir(ko.toJS(viewModel));
console.groupEnd();

It displays a tree of the view model, which you can click through and
inspect.

This works well. However, because we are using toJS, its impossible
to see what are observables, what are straight objects, etc. Doing
console.dir(viewModel); just shows a whole bunch of functions, which
is not very helpful.

What are other people using? How do you inspect and debug problems in
the view model?

[rpn]

I usually use a combination of console.log calls and a debug section at the bottom of the page that has <div data-bind="text: ko.toJSON(viewModel.interestingPart)"></div>

Sometimes I do console.log calls like:  console.log(ko.isObservable(someObject), ko.utils.unwrapObservable(someObject))

That way it will tell me if it is observable and gives me the value.

I have some other idease for debugging tools, but nothing to show yet.  

[Michael]

I don't know firebug at all, but Chrome, imho, has the hand's down
debugging console winner. With it, I can manipulate viewModel objects
and watch the bindings update, completely overwrite function
definitions from the console, and basically walk on water.

[matthew.nic...@gmail.com]

I second what rpn says (BTW if you do knockout you should definitely check out his blog at  http://www.knockmeout.net/). The one thing I would add is I often attach parts of my view model to the Window object during debug so I can inspect them in the console.

Matthew

[Scott Duncombe]

If you need to debug templates the "visible" binding will execute any function you give it. So occasionally I'll throw in a 

<span data-bind="visible: console.log($data) "></span>

if I have no idea what the hell is happening and just need to see SOMETHING.

There is probably a much more elegant way to do this...

[pasa...@gmail.com]

I think you are pretty close with the ko.toJSON() call. I've seen on one of the videos that they do something similar near the end of the video, but also make a call to stringify.
Sorry, can't help much more than that as I'm very new to web dev. I did note that the output was nicely formatted though.

HTH
Paul

[rpn]

A good way to do this is to add:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

wherever you want to see what your view model looks like.

[Fábio Rogério SJ]

I use the Chrome, it is very good.

[Lee Blazek]

I also just found a knockoutjs extension for chrome to view model data

Do a search for it