Question

I am a seasoned C# coder, but quite the JavaScript novice, and I am now trying to get a pure JavaScript component, the very competent Kendo UI DataSource, to talk nicely to my C# MVC3/4 controllers.* I would like to be able to examine certain JavaScript objects so I can fine tune my client side model mapping code, but the view of objects in the Chrome debugging console is a little cluttered and low level.

Is there a Chrome add-in I can use for visualising JavaScript objects while debugging script, and failing that, a nice object visualizer that I can use to output object visualizations as HTML. I can then toggle whether this is active, built a visual object graph for a debugging session, then switch the visualiser off again for normal operations in my client scripts.

** This question is a much broader and differently targetted one that shares only the same goal of my other question, How can I accept JSON requests from a Kendo UI data source in my MVC4 application? However, that question is more technology specific and covers the whole client-server roundtrip, where this one is specific to only visualising JavaScript objects on the client.

EDIT:
Based on suggestions below, console.log does provide adequate output for runtime inspection, but often the console is a busy place, and I would prefer to output a persistent visualization elsewhere, with all properties in the object expanded, but without the ‘internals’ e.g. __id and __proto, as seen in the image. I would just like to see models as an array of two objects, each with only Id and Name properties.

Answer 1

I find it more useful to send the object to the console than inspect it inside the debugger. It’s less cluttered and you don’t have to go searching through your code for a breakpoint. If you just do a console.log(object), then hit F12 and select the Console, your object will be sitting there ready to be inspected.

Edit

If you do a console.log on the models property, it will come out like this:

Or, if you prefer, you could use something like this to spit out the information without you having to click any arrows:

function logModels(models) {
    for (o in models) for (p in models[o])
            console.log(p +'\t' + models[o][p]);
}

Which looks like this:

You can also filter the console to only display Logs by clicking the appropriate button at the bottom of the bar.