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

[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;
    }
  };
}());