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