Question

I’m developing a complex website that heavily leverages jQuery and a number of scripts. On load of the site, none of my scripting is working (though I can confirm that other scripts are functioning fine). I wouldn’t be posting such a lame question here on SE except for one thing:

The instant I hit F12 to turn on developer tools so I can debug my issue, everything instantly works perfectly!

Worse, if I shut down the browser, start it up, turn on Dev Tools first and visit the site, everything works as expected.

So I can’t even debug the darned problem because Dev Tools fixes it! What could Dev Tools be doing that makes things work? Does it change the UA (I do some jQuery.browser detection)? Does it do something to doctype?

EDIT

All my console logging is wrapped in the following wrapper utility function:

   function log(msg){
    if (console){
        console.log(msg);
    }
   }

Any thoughts or suggestions I could try would be welcome. I’ll post here if I find a solution.

Answer 1

I appreciate I’m pretty late to the party here, but I’ve got a solution for IE9 that’s a little different.

(function() {
    var temp_log = [];
    function log() {
        if (console && console.log) {
            for (var i = 0; i < temp_log.length; i++) {
                console.log.call(window, temp_log[i]);
            }
            console.log.call(window, arguments);
        } else {
            temp_log.push(arguments);
        }
    }
})();

Basically instead of console.log you use log. If console.log exists then it works as normal, otherwise it stores log entries in an array and outputs them on the next log where the console is available.

It would be nice if it pushed the data as soon as the console is available, but this is less expensive than setting up a custom setInterval listener.

Updated function (1 October 2012)

I’ve updated this script for my own use and thought I’d share it. It has a few worthy improvements:

• use console.log() like normal, i.e. no longer need to use non-standard log()
• supports multiple arguments, e.g. console.log('foo', 'bar')
• you can also use console.error, console.warn and console.info (though outputs them as console.log)
• script checks for native console every 1000ms and outputs the buffer when found

I think with these improvements, this has become a pretty solid shim for IE9. Check out the GitHub repo here.

if (!window.console) (function() {

    var __console, Console;

    Console = function() {
        var check = setInterval(function() {
            var f;
            if (window.console && console.log && !console.__buffer) {
                clearInterval(check);
                f = (Function.prototype.bind) ? Function.prototype.bind.call(console.log, console) : console.log;
                for (var i = 0; i < __console.__buffer.length; i++) f.apply(console, __console.__buffer[i]);
            }
        }, 1000); 

        function log() {
            this.__buffer.push(arguments);
        }

        this.log = log;
        this.error = log;
        this.warn = log;
        this.info = log;
        this.__buffer = [];
    };

    __console = window.console = new Console();
})();