A `console.*` logger and `window.onerror` handler for mobile devices

ConsoleLogger.js

(function() {
    var ZINDEX_MAX = 2147483647;

    if (window === window.top) {
        // Host page code
        var wrapper = document.createElement('div');
        wrapper.style.cssText = [
            'display:block; position: fixed; z-index: ' + ZINDEX_MAX + ';',
            'left: 0; bottom: 0; right: 0; box-sizing: border-box;',
            'background: rgba(0,0,0,0.8); color: white; font-size: 8px;',
            'line-height: 10px; font-family: monospace; letter-spacing: -1px;',
            'pointer-events: none;'
        ].join('\n');

        var reporter = document.createElement('ul');
        reporter.style.cssText = [
            'display:block; margin:0; padding:0;'
        ].join('\n');
        wrapper.appendChild(reporter);

        setTimeout(function() {
            document.body.appendChild(wrapper);
        }, 0);
        
        window.console = {
            log: function(msg) {
                logMessage('<span style="color:#ccc">' + msg + '</span>');
            },
            warn: function(msg) {
                logMessage('<span style="color:yellow">' + msg + '</span>');
            },
            error: function(msg) {
                logMessage('<span style="color:red">' + msg + '</span>');
            },
            debug: function(msg) {
                logMessage('<span style="color:white">' + msg + '</span>');
            }
        };

        function logMessage(msg) {
            var li = document.createElement('li');
            li.innerHTML = msg.toString();
            li.style.cssText = 'display:block';
            reporter.appendChild(li);
            reporter.scrollTop = 1e8 + 'px';
        }

    } else {
        window.console = {
            log: function(msg) {
                top.console.log(msg);
            },
            warn: function(msg) {
                top.console.warn(msg);
            },
            error: function(msg) {
                top.console.error(msg);
            },
            debug: function(msg) {
                top.console.debug(msg);
            }
        }
    }

    window.onerror = function(err, url, line) {
        console.error([err,url,line].join(' | '));
    };

})();

index.html

<h1>Logger bookmarklet</h1>

<a href="javascript:var%20s=document.createElement('script');s.src='http://is.gd/kb9snr';document.body.appendChild(s);">Add this URL to your bookmarks</a>