☰

Console Log Styler

Styles console.log() output with customizable colors, borders, and visual effects for better debugging visibility.

// ==UserScript==
// @name         Console Log Styler
// @namespace    https://greasyfork.org/en/users/670188-hacker09?sort=daily_installs
// @version      1
// @description  Styles console.log() output with customizable colors, borders, and visual effects for better debugging visibility.
// @author       hacker09
// @match        *://*/*
// @run-at       document-start
// @icon         https://i.imgur.com/27mYVlx.png
// @grant        none
// ==/UserScript==

(function(){
  //EASY CONFIG - Change these values
  const selectedBorderStyle="leftRightBorder"; //leftBorder, leftRightBorder, topBorder, fullBorder, glow, arrow, bullet
  const borderColor="#007acc"; //any hex color

  //Border styles
  const borderStyles={
    leftBorder:`border-left:3px solid ${borderColor};`,
    leftRightBorder:`border-left:3px solid ${borderColor};border-right:3px solid ${borderColor};`,
    topBorder:`border-top:2px solid ${borderColor};`,
    fullBorder:`border:2px solid ${borderColor};`,
    glow:`box-shadow:0 0 8px rgba(0,122,204,0.6);`,
    arrow:`border-left:3px solid ${borderColor};`, //add ▶ manually to logs
    bullet:`border-left:3px solid ${borderColor};padding-left:13pxpx;` //add ● manually to logs
  };

  //Color options with selected border style
  const styles={
    green:`color:#00ff00;background:#2d2d2d;padding:4px 8px;border-radius:3px;font-size:13px;${borderStyles[selectedBorderStyle]}`,
    orange:`color:#ff8c00;background:#2d2d2d;padding:4px 8px;border-radius:3px;font-size:13px;${borderStyles[selectedBorderStyle]}`,
    cyan:`color:#00ffff;background:#2d2d2d;padding:4px 8px;border-radius:3px;font-size:13px;${borderStyles[selectedBorderStyle]}`,
    yellow:`color:#ffff00;background:#2d2d2d;padding:4px 8px;border-radius:3px;font-size:13px;${borderStyles[selectedBorderStyle]}`,
    purple:`color:#ff00ff;background:#2d2d2d;padding:4px 8px;border-radius:3px;font-size:13px;${borderStyles[selectedBorderStyle]}`,
    white:`color:#ffffff;background:#404040;padding:4px 8px;border-radius:3px;font-size:13px;${borderStyles[selectedBorderStyle]}`,
    red:`color:#ff4444;background:#2d2d2d;padding:4px 8px;border-radius:3px;font-size:13px;${borderStyles[selectedBorderStyle]}`
  };

  const originalLog=console.log;
  console.log=function(...args){
    originalLog("%c"+args.join(" "),styles.white);
  };
})();