Simple pretty logging functions used in my videos to display parts of the program as examples.

presentation-debug-statements.js

"use strict";

var presentationLogger = (function(window, undefined) {
  // warn -> Message -> Warning
  var warn = function _warning (val) {
    console.warn( `%c${val}`, 'color:#ff3c41;font-weight:bold' );
  };

  // echo :: Message -> Echo message to console italized.
  var echo = function _logging (val) {
    console.log( `%c${val}`, 'color:#47cf73;font-style:italic' );
  }

  // log :: Mixed [, Mixed..] -> Logs values to console.log
  var log = function _echoMessages (...msgs) {
    console.debug(...msgs);
  }
  
  var folder = function(label, fn, collapsed = false) {
    let fold = collapsed ? console.groupCollapsed : console.group;
    fold(label);
    fn();
    console.groupEnd();
  };
  
  return {
    warn: warn,
    log: log,
    echo: echo,
    error: console.error,
    trace: console.trace,
    fold: console.group,
    foldEnd: console.groupEnd,
    folder: folder,
    table: console.table,
    assert: console.assert,
    folded: console.groupCollapsed,
    clear: console.clear,
    count: console.count,
    stamp: console.timestamp,
    profile: console.profile,
    profileEnd: console.profileEnd,
    mem: console.memory
  };
}(window));

These functions/methods are useful for my videos I'm making to teach JavaScript. They are great for logging messages but since the code is just as large as the code in the video lesson it doesn't make sense to have it sitting there onscreen during the presentation.

Feel free to paste this into your code pen. My console is themed to be dark so the logout messages look good with the colors added in the console.warn and console.debug statements.

Removed static text in the warn/log methods. Switched 'echo' and 'log' around (so now log is proxy to 'console.log' and 'echo' does what 'log' previously did (just italicized message). Added more of the console methods as utils.