Search code examples
javascriptdebuggingconsole

console.dir - how to show what object it applies to / label it?

Given a declaration like

myobj = {a:1, b:2};

I can write console.dir(myobj). This results in 

{ a: 1, b: 2 }

But say I want to remind myself, in a complex debugging session, what the console.dir is about:

I can write

console.log("myobj"); console.dir(myobj);

This will print 

myobj
{ a: 1, b: 2 }

But it's a bit clunky.

Using console.log("myobj:" + myobj);

prints out

myobj:[object Object]

which doesn't work at all. Is there a better way to label a console.dir?

Solution

  • You could just wrap your named variable in an object and the name will then be visible as the first layer of expansion.

    myobj = {a:1, b:2};

console.dir({myobj});

    You can also use "groups" if you want the top-level wrapper to be your variable's name. Probably you'd want to do this with some sort of helper (and I don't really even suggest it, but it may meet your needs so just showing it as a demonstration):

    function labeledConsoleDirGroup(wrappedVar) {
  const varName = Object.keys({myobj})[0];
  console.group(varName);
  console.dir(wrappedVar[varName]);
  console.groupEnd(varName);
}

// Later ...
const myobj = {a: 1, b: 2};
labeledConsoleDirGroup({myobj});

    Note that this doesn't work in the in-built code snippet runner since it doesn't support groups. But it looks like this in Chrome:

    looks like this in Chrome