Debugger Multiline issue in vscode

[MolikoDeveloper]

i have a custom debug for my app in development mode (code below).

in the browser it shows great:

but in vscode it shows in multiline:

i dont care if i cant see the colors, but the multiline i dont like it... the important part of the code is the next:

console.log(
    `%c[%c${source}%c/%c${level.toUpperCase()}%c] %c:`,
    "color: inherit",
    sourceStyle,
    "color: inherit",
    levelStyle,
    "color: inherit",
    "color: inherit",
    ...message
);

for each color change, it creates a new line in the debugger 🌵

class Debug {
    /**
     * Registra un mensaje de log con el nivel especificado y los datos asociados.
     * 
     * @param {("debug" | "info" | "warn" | "error" | "fatal")} level - El nivel de log a registrar (ej: "info", "error").
     * @param {("webServer" | "webClient" | "react" | "database" | "websocket" | "DebugWebsocket" | "api" | "bundler" | "server")} source - La fuente que genera el log.
     * @param {...any} data - Los datos adicionales que se registrarán en el log.
    */
    static log(level, source, ...data) {
        const logEntry = {
            level,
            source,
            timestamp: new Date().toLocaleString(),
            message: data,
            format: "log"
        };
        this.showMessage(level, source, data)
        this.printLog(logEntry);
    }

    static printLog({ timestamp, source, level, message }) {
        const sourceStyle = Debug.getSourceStyle(source);
        const levelStyle = Debug.getLevelStyle(level);

        console.log(
            `%c[%c${source}%c/%c${level.toUpperCase()}%c] %c:`,
            "color: inherit",
            sourceStyle,
            "color: inherit",
            levelStyle,
            "color: inherit",
            "color: inherit",
            ...message
        );
    }

    static getSourceStyle(source) {
        const sourceColorMap = {
            webServer: "color: yellow",
            webClient: "color: lightyellow",
            react: "color: lightcyan",
            database: "color: green",
            websocket: "color: magenta",
            DebugWebsocket: "color: lightyellow",
            api: "color: cyan",
            bundler: "color: blue",
            server: "color: lightcoral"
        };
        return sourceColorMap[source] || "color: inherit";
    }

    static getLevelStyle(level) {
        const levelColorMap = {
            debug: "color: yellow",
            info: "color: green",
            warn: "color: lightyellow",
            error: "color: red",
            fatal: "color: lightcoral"
        };
        return levelColorMap[level] || "color: inherit";
    }

    /*
     * Crea un elemento para mostrar un mensaje en pantalla.
     * 
     * @param {("debug" | "info" | "warn" | "error" | "fatal")} level
     * @param {("webServer" | "webClient" | "react" | "database" | "websocket" | "DebugWebsocket" | "api" | "bundler" | "server")} title
     * @param {...any} message
     */
    static showMessage(level, title, ...message) {
        let container = document.getElementById('message-container');
        if (!container) {
            container = document.createElement('div');
            container.id = 'message-container';
            document.body.appendChild(container);

            container.style.position = 'fixed';
            container.style.bottom = '10px';
            container.style.left = '10px';
            container.style.display = 'flex';
            container.style.flexDirection = 'column';
            container.style.gap = '10px';
            container.style.maxWidth = '90vw';
            container.style.zIndex = '9999';
        }

        let messageElem = document.createElement('div');
        messageElem.className = 'message';

        let levelColors = {
            'debug': '#e0e0e0',
            'info': '#2196f3',
            'warn': '#ff9800',
            'error': '#f44336',
            'fatal': '#b71c1c'
        };

        messageElem.style.border = '1px solid #ccc';
        messageElem.style.borderLeft = '5px solid ' + (levelColors[level] || '#ccc');
        messageElem.style.borderRadius = '4px';
        messageElem.style.padding = '10px';
        messageElem.style.backgroundColor = 'gray';
        messageElem.style.opacity = '0.8'
        messageElem.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
        messageElem.style.position = 'relative';
        messageElem.style.minWidth = "150px"

        messageElem.style.opacity = '0';
        messageElem.style.transform = 'translateX(-20px)';
        messageElem.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';

        requestAnimationFrame(() => {
            messageElem.style.opacity = '1';
            messageElem.style.transform = 'translateX(0)';
        });

        let titleElem = document.createElement('strong');
        titleElem.innerText = title;
        messageElem.appendChild(titleElem);

        let levelElem = document.createElement('span');
        levelElem.innerText = ' [' + level + ']';
        levelElem.style.fontSize = '10px'
        messageElem.appendChild(levelElem);

        let messageContent = document.createElement('div');
        messageContent.innerText = message.join(' ');
        messageContent.style.fontSize = '12px';
        messageContent.style.marginTop = '5px';
        messageElem.appendChild(messageContent);

        let closeButton = document.createElement('button');
        closeButton.innerText = 'X';
        closeButton.style.position = 'absolute';
        closeButton.style.top = '5px';
        closeButton.style.right = '5px';
        closeButton.style.border = 'none';
        closeButton.style.background = 'transparent';
        closeButton.style.cursor = 'pointer';
        closeButton.style.fontSize = '14px';
        closeButton.onclick = function () {
            container.removeChild(messageElem);
        };
        messageElem.appendChild(closeButton);

        container.appendChild(messageElem);

        setTimeout(function () {
            if (container.contains(messageElem)) {
                container.removeChild(messageElem);
            }
        }, 5000);
    }
}
globalThis.debug = Debug;