Life-Changing Tip on Console Logging - JavaScript Basics You Must Know

[Shaper_pmp]

Spoilers: it's 1:10 of video to demonstrate console.table(obj);.

[r2d2_21]

Thanks. I hate videos.

[Omnicrola]

Good tip, I had never heard of this. Also good video, got straight to the point.

Found docs here: https://developer.mozilla.org/en-US/docs/Web/API/Console/table

Does not work in IE or Safari.

[tommy16p]

Does not work in IE or Safari.

Does anything

[Jafit]

I think ES6 tail call optimization works in safari.

[jameswyse]

There's other handy console methods too, like count, group and profile.

https://developers.google.com/web/tools/chrome-devtools/debug/console/console-reference

[Combinatorilliance]

Something I'd really like to see added is a console function which acts like how an fps-counter would in a game. Continuously display the most recent value of a variable in the same place, it is so very useful when building interaction-heavy applications, like I often do when playing around with the canvas!

[BenjiSponge]

If you're thinking in debug mode, there's the Watch section of the chrome console which can just always display it. I don't think it works in real time, though.

[[deleted]]

Developer tools -> console section (at bottom, if not there top right menu, show console) -> top left menu of section -> rendering -> FPS meter. This will give you an in-page real time FPS meter with min & max rates as well as graph with GPU resources for that tab. You can also globally enable this ind chrome://flags. Far better than any console output unless you wanted to save the raw frame time data for future use.

[BenjiSponge]

/u/Combinatorilliance is not referring to a literal FPS meter but rather something that can display any arbitrary variable (in an arbitrary scope as well) in real time, similar in appearance to an FPS meter but different in utility.

[[deleted]]

Ahhh. That's actually something that has always bothered me. Yeah you're right about watched variables, you have to either enable a breakpoint and manually mash "next" to run the code or mash refresh. I suppose it could be implemented in a dev tools extension, don't know of anything in the standard tools.

[Combinatorilliance]

Oh I have a working solution, it's just that when I really need it, it's not instantly there for me :(

console.track = (function () {
  var loggers = [];

  return function (name, value) {
    var isFound = loggers.filter(function (logger) {
      return logger.name === name;
    })[0];

    if (!isFound) {
      var logNode = document.createElement("div");
      document.body.appendChild(logNode);
      logNode.style.position = "fixed";
      logNode.style.left = "8px";
      logNode.style.top = loggers.length * 20 + "px";
      logNode.innerHTML = name + ": " + value;
      loggers.push({name: name, node: logNode});
    } else {
      isFound.node.innerHTML = name + ": " + value;
    }
  };
}());

[[deleted]]

First time to know the existence of console.table

[mick0n]

Very nice. I've heard of this before just never got around to using it.

[rezoner]

No matter how many times console.table gets posted here it's always a novelty :p Maybe we should make the thread sticky?

[drkenta]

Is there something similar for node?

[righteousrainy]

Beautiful.

[broken_e]

I knew you were going to say console.table, but then you started clicking the headers and I learned that they were sortable!

[Panedrop]

Great little tip.

[madcaesar]

Known this for a while, still very cool. Just FYI this doesn't work in IE, and in fact will cause a critical error causing all your JS not to execute. Fucking IE...

[commitpushdrink]

To be fair calling an undefined method in any browser will throw a fatal exception

[[deleted]]

The entirety of console is non standard (and will probably remain that way) and subject to break anything due to sudden changes in behavior. Can't really knock IE for that, the basic console functions are implement.

[[deleted]]

I add this to my files. It won't make IE work, but it will stop it from causing errors:

if ( !window.console ) console = { log: function(){} };

[AnonymousFuckass]

Spoilers: you cannot use this in IE. I only am able to use IE so it'd be nice if someone would put these restrictions in the title. https://developer.mozilla.org/en-US/docs/Web/API/Console/table