jQuery+jQuery UIと使うconsole.log どっかでconsole.show()と呼ぶ。

logger.js

/*
  <script src="/javascripts/jquery-1.x.min.js" type="text/javascript"></script> 
  <script src="/javascripts/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script> 
  <script src="/javascripts/logger.js" type="text/javascript"></script> 

<a href="#" onclick="console.show();return false">Open console</a>

*/

var console = (function() {
    var escapeHTML = function(html) {
        return (html+"").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    };
    var wid = "log_window_"+Math.ceil(Math.random() * 100000000);
    var win = undefined;
    var text = undefined;
    $(document).ready(function(){
        $('body').append('<div id="'+wid+'" style="display:block;position:absolute;top:64px;left:64px;border:1px solid #666;background:#333;color:#eee;width:500px;height:200px;font-size:13px;line-height:1.4em;display:none;margin:0;"><div id="'+wid+'_close" style="display:block;position:absolute;top:4px;right:4px;padding:2px 4px;background:#666;cursor:pointer;color:#ddd;z-index:1;margin:0;">Close</div><div id="'+wid+'_text" style="display:block;position:absolute;top:0;bottom:0;left:0;right:0;text-align:left;padding:4px 8px;overflow:auto;margin:0;"></div></div>');
        win = $("#"+wid);
        text = $("#"+wid+"_text");
        text.append(queue);
        queue = '';
        $("#"+wid+"_close").click(function(e){
            win.hide('blind');
        });
        win.draggable();
    });
    var queue = '';
    return {
        show: function() {
            win.show('blind');
        },
        hide: function() {
            win.hide('blind');
        },
        log: function(str) {
            if(text) {
                var html = '<div style="display:block;margin:0 0 2px 0;padding:0;color:#fff;">'+escapeHTML(str)+"</div>";
                text.append(html);
            }
            else {
                queue = queue + html;
            }
        }
    };
})();

(function() {
    var stringify = function (jsonData) {
            var strJsonData = '{';
            var itemCount = 0;
        for (var item in jsonData) {
            if (itemCount > 0) {
                strJsonData += ', ';
            }
            temp = jsonData[item];
            if (typeof(temp) == 'object') {
                s =  stringify(temp);    
            } else {
                s = '"' + temp + '"';
            }    
            strJsonData += '"' + item + '":' + s;
            itemCount++;
        }
        strJsonData += '}';
        return strJsonData;
    };
    
    var _ajax = jQuery.ajax;
    jQuery.ajax = function() {
        var url = arguments[0];
        var settings = arguments[1];
        if(typeof url != 'string') {
            settings = arguments[0];
            url = settings.url;
        }
        var method = (settings.type || jQuery.ajaxSettings.type).toUpperCase();
        if(method=="GET" && settings.data) {
            url = url + "?"+settings.data;
        }
        console.log("HTTP("+method+")> "+url);
        return _ajax.apply(this, arguments);
    };
})();