Log incoming and outgoing XML stanzas in different colors

src/converse-core.js

@@ -130,7 +130,7 @@
     _converse.DEFAULT_IMAGE_TYPE = 'image/png';
     _converse.DEFAULT_IMAGE = "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";
 
-    _converse.log = function (message, level) {
+    _converse.log = function (message, level, style='') {
         /* Logs messages to the browser's developer console.
          *
          * Parameters:
@@ -144,9 +144,13 @@
          *  When using the 'error' or 'warn' loglevels, a full stacktrace will be
          *  logged as well.
          */
+        if (level === Strophe.LogLevel.ERROR || level === Strophe.LogLevel.FATAL) {
+            style = style || 'color: maroon';
+        }
         if (message instanceof Error) {
             message = message.stack;
         }
+        const prefix = style ? '%c' : '';
         const logger = _.assign({
                 'debug': _.get(console, 'log') ? console.log.bind(console) : _.noop,
                 'error': _.get(console, 'log') ? console.log.bind(console) : _.noop,
@@ -155,27 +159,27 @@
             }, console);
         if (level === Strophe.LogLevel.ERROR) {
             if (_converse.debug) {
-                logger.trace(`${moment().format()} ERROR: ${message}`);
+                logger.trace(`${prefix} ${moment().format()} ERROR: ${message}`, style);
             } else {
-                logger.error(`ERROR: ${message}`);
+                logger.error(`${prefix} ERROR: ${message}`, style);
             }
         } else if (level === Strophe.LogLevel.WARN) {
             if (_converse.debug) {
-                logger.warn(`${moment().format()} WARNING: ${message}`);
+                logger.warn(`${prefix} ${moment().format()} WARNING: ${message}`, style);
             } else {
-                logger.warn(`WARNING: ${message}`);
+                logger.warn(`${prefix} WARNING: ${message}`, style);
             }
         } else if (level === Strophe.LogLevel.FATAL) {
             if (_converse.debug) {
-                logger.trace(`${moment().format()} FATAL: ${message}`);
+                logger.trace(`${prefix} ${moment().format()} FATAL: ${message}`, style);
             } else {
-                logger.error(`FATAL: ${message}`);
+                logger.error(`${prefix} FATAL: ${message}`, style);
             }
         } else if (_converse.debug) {
             if (level === Strophe.LogLevel.DEBUG) {
-                logger.debug(`${moment().format()} DEBUG: ${message}`);
+                logger.debug(`${prefix} ${moment().format()} DEBUG: ${message}`, style);
             } else {
-                logger.info(`${moment().format()} INFO: ${message}`);
+                logger.info(`${prefix} ${moment().format()} INFO: ${message}`, style);
             }
         }
     };
@@ -1642,10 +1646,10 @@
             };
             if (this.debug) {
                 this.connection.xmlInput = function (body) {
-                    _converse.log(body.outerHTML, Strophe.LogLevel.DEBUG);
+                    _converse.log(body.outerHTML, Strophe.LogLevel.DEBUG, 'color: darkgoldenrod');
                 };
                 this.connection.xmlOutput = function (body) {
-                    _converse.log(body.outerHTML, Strophe.LogLevel.DEBUG);
+                    _converse.log(body.outerHTML, Strophe.LogLevel.DEBUG, 'color: darkcyan');
                 };
             }
         };