Side JS Output Console

A compact solution for showing console logging on the actual html page if desired. Only supports output, no input.

by Taylor Lopez

HTML

<div style="padding: 75px; border: solid red 2px" onclick="console.log('square clicked!')">Click Me!</div>

JavaScript

///* START CONSOLE FUNCTIONALITY -- DON'T TOUCH */
// This function intercepts the console.log() calls and prints the output to the result pane to the right like a standard console instead of the hidden console.
function enableConsole(width, height, fontSize) {
    this.width = typeof width === 'undefined' ? 300 : width;
    this.height = typeof height === 'undefined' ? 200 : height;
    this.fontSize = typeof fontSize === 'undefined' ? 10 : fontSize;
    this.lineMax = 1000;
    this.opacity = 0.6;
    this.isHidden = false;
    this.buttonRightOffset = 0;
    this.scrollEnabled = false;
    var _self = this;
    
    var _body = $("body");
    
    var _console = $(document.createElement("div"));
    _console.css({
        "background-color": "black",
        "color": "white",
        "position": "fixed",
        "right": "0",
        "bottom": "0",
        "width": this.width + "px",
        "height": this.height + "px",
        "overflow": "auto",
        "padding": "10px",
        "font-family": '"Lucida Console", "Courier New", "Courier"',
        "font-size": this.fontSize + "px",
        "z-index": "999999",
        "pointer-events": "none",
        "opacity": this.opacity,
        "border-radius":"5px 0 0 0"
    });
    _body.append(_console);
    
    var _hideShowButton = $(document.createElement("div"));
    _hideShowButton.css({
        "color": "white",
        "text-align": "center",
        "width": "40px",
        "height": "40px",
        "background-color": "black",
        "opacity": this.opacity,
        "position": "fixed",
        "bottom": (this.height - 20 - 5) + "px",
        "right": (buttonRightOffset + 5) + "px",
        "border-radius": "50%",
        "font-size": "20px",
        "font-family": "sans-serif",
        "line-height": "35px",
        "user-select": "none",
        "cursor": "pointer",
        "overflow": "hidden",
        "z-index": "1000000"
    });
    _hideShowButton.text("\u2193");
   ...