Greasy Fork 镜像站

Console Log Styler

Styles console.log() output with customizable colors, borders, and visual effects for better debugging visibility.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Console Log Styler
// @namespace    https://greasyfork.org/en/users/670188-hacker09?sort=daily_installs
// @version      2
// @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 showScriptName=true; //Set to false to hide the script name/(Page) label
  const autoColor=true; //Set to false to force white text for all logs
  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:13px;` //add ● manually to logs
  };

  //Color options
  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]}`,
    red:`color:#ff4444;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]}`
  };

  const colorKeys = Object.keys(styles).filter(k => k !== 'white'); //exclude white from auto-picker

  const originalLog=console.log;
  console.log=function(...args){
    //Parse stack, default to 'Page' if no script name found
    const origin = ((new Error().stack.split('\n')[2]||'').match(/name=([^&]+)/)||['','Page'])[1].replace('.user.js','');
    const prefix = showScriptName ? `(${decodeURIComponent(origin)}): ` : '';

    //Pick color based on script name hash if enabled (and not Page), otherwise white
    let chosenStyle = styles.white;
    if(autoColor && origin !== 'Page') {
      let hash = 0;
      for (let i = 0; i < origin.length; i++) hash = origin.charCodeAt(i) + ((hash << 5) - hash);
      chosenStyle = styles[colorKeys[Math.abs(hash) % colorKeys.length]];
    }

    originalLog("%c"+prefix+args.join(" "), chosenStyle);
  };
})();
扫码关注【爱吃馍】
