Farbe für JavaScripts console.log() Funktion

JavaScripts console.log() kann mit folgendem Trick gestylt werden:

console.log('%c' + 'Hallo Welt', 'color:orange;font-weight:bold');

Simple Sache das ganze. Aber warum sich das nicht in einer Funktion zu nutze machen! Also schnell mal was geschrieben und gleich erklärt wie es angewendet wird. Wer es nutzen will kann es nutzen, bitte:

/**
 * Define styled console log
 * 
 * @return {Function} New console.log function
 */
var myLog = (function () {
    'use strict';

    var _console = window.console;

    /**
     * New console.log function
     * 
     * @param  {String}        message Message to log
     * @param  {Object|String} style   Object or string with style declaration
     * @return {Object}                Styled console.log function
     */
    return function consoleLog(message, style) {
        var def, css = style || '';

        if (typeof style !== 'string') {
            css = '';

            for (def in style) {
                if (style.hasOwnProperty(def)) {
                    css += (def + ':' + style[def] + ';');
                }
            }
        }

        _console.log('%c' + message, css);

        // Get console.log with predefined styles
        return function (message, style) {
            return consoleLog(message, style || css);
        };
    };
}());

Erklärung

Die Funktion myLog() (oder wie auch immer man es nennen möchte) kann wie das normale console.log() genutzt werden:

myLog('Hallo Welt');

Ab jetzt ist der zweite Parameter jedoch der Style der gesetzt werden soll. Dieser kann per String:

myLog('Hallo Welt', 'color:orange;font-weight:bold;');

oder als Object übergeben werden:

myLog('Hallo Welt', {
    'color': 'orange',
    'font-weight': 'bold'
});

Um den Style nicht immer wieder übergeben zu müssen gibt console.myLog einelog-Funktion wieder mit dem gespeicherten Style:

// Log-Funktion mit Style erstellen
var warningLog = myLog('Hallo Welt', {
    'color': 'orange',
    'font-weight': 'bold'
});

warningLog('Lorem ipsum'); // Selber Style

Das wars, schnell und einfach. Der Code steht zur freien verfügung wer ihn nutzen möchte.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.