Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

JavaScript Debugging Tip: Objects

By  on  

Every so often I want to view what an object looks like at various points of an execution cycle.  Many people like to use breakpoint debugging but I find it a bit annoying and tedious -- it's simply not for me.  The problem comes when I log an object to the console; since other operations may have occurred between my log call and the rest of execution, I may not be seeing a true representation of the object at that moment within the console.  There are a few solutions you can employ:

The first solution is converting the object to a JSON string to browse its contents:

// Log the JSON representation of this object 
// at *this* moment
console.log(JSON.stringify(myObject));

Now I can see every key and value of the object without needing to click around it.  If you prefer to work with a real object in the debugger, simply convert the JSON object from string to an object again, effectively cloning it:

// Object -> String -> Object (clone)
console.log(JSON.parse(JSON.stringify(myObject)));

Of coures this isn't a perfect solution for some people but it has worked beautifully for me in the past.  Maybe I'm a lesser programmer for not liking breakpoint debugging but hey -- I tend to get things done!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    LightFace: Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    HTML5’s window.postMessage API

    One of the little known HTML5 APIs is the window.postMessage API.  window.postMessage allows for sending data messages between two windows/frames across domains.  Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...

  • By
    Link Nudging with CSS3 Animations

    One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging.  I've created this effect with three flavors of JavaScript:  MooTools, jQuery, and even the Dojo Toolkit.  Luckily CSS3 (almost) allows us to ditch...

Discussion

  1. MaxArt

    Chrome has a mixed behavior: it displays the first 5 properties of the object at runtime, but when you expand it it shows the property values at interaction time. So it’s not necessary for simple objects.

    Note: the trick does *not* work in Internet Explorer. It would just log [object Object] in the console.
    Why am I not surprised?

  2. Cristian

    If you would get a better readibility using JSON.stringify, use something like that: 

    JSON.stringify(myObject, null, '  ')

    The last parameter is the caracter/s to indent the stringified object.

  3. Jack Moore

    @MaxArt, try console.dir instead of console.log for Internet Explorer.

    • Dan M

      @Jack Moore – did not know that. Very useful! Thanks!

    • Jasdeep Khalsa

      @Jack Moore – Very useful Jack!

    • Shabith

      Thats something new and very useful :) thanks Jack.

  4. deemyBoy

    @OP (David Walsh)

    I don’t get this –> Now I can see every key and value of the object without needing to click around it. If you prefer to work with a real object in the debugger, simply convert the JSON object from string to an object again, effectively cloning it:

    If you already have a JSON object then why you need to clone it?

    Raises lots of questions in my noobie mind!!!

    Primary level (or direct) questions:
    ————————————
    If you clone it do you now have 2 copies?
    How do you rename the 2nd copy?
    Where is the 2nd copy stored?
    How do you access it?

    Secondary questions:
    ——————–
    Does this make maintenance a headache?
    Can any (desired) modifications/updates be overwritten so rendering cloning pointless?
    How do specify which you are using (original or clone)?

    Why do people just throw stuff out there such as “effectively cloning it” without either explaining the implications themselves or linking to articles or sites that explain it!?

    Is cloning god/bad?
    Is it best practise?
    Cloning explained –>

    Etc., etc.

    Used it btw and could finally “see” my object instead of “[Object, Object, Object, Object, Object]” so guess I owe you a big thanks for this on the most part.

    If you could add further clarification about cloning that would be good.

    In my mind if have an object and realise I don’t want to JSON.stringify it anymore the rather than doing:

    console.log(JSON.parse(JSON.stringify(myObject)));

    I just do:

    console.log(myObject);

    Does that make sense?
    In essence, I already have my object so why stringify and parse it to get back to where I was in the first place???????
    ??????
    ??????

  5. Martin

    console.log("%j", myObject); or console.dir(myObject)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!