I have come across the need for this nifty little javascript item and thought I would share. Again, one who uses php to render cool pages, often wants those pages to do cool things, hence I argue javascript is infact relevent in small amounts on this forum. The one neat trick is that the logging box does not show up till you call log() for the first time, which is incredibly useful for me. Another feature is the position:fixed, so it will follow as you scroll. This probably only works on modern browsers.

var _log            = [];
var _log_off      = false;
var _log_count = 0;
var _log_max   = 10;
var _logger      = null;
function log( msg )
{
  if ( _log_off ) { return }
  if ( !_logger ) {
    _logger = document.createElement('div');
    _logger.style.position = 'fixed';
    _logger.style.bottom = '0px';
    _logger.style.right = '0px';
    _logger.style.padding = '5px;'
    _logger.style.backgroundColor = '#EEEEEE';
    _logger.style.border = 'solid 1px #666666';
    document.body.appendChild(_logger);
  }
  _log.unshift( (_log_count++) +' : '+ msg );
  if ( _log.length > _log_max ) { _log.pop() }
  _logger.innerHTML = _log.join('<br />');
}
    9 months later

    As a JavaScript newbee, my most awkward discomfort is the lack of debugging tools available, so THANKS for this nice logging script. May I ask a question? I am baffled by the following line of code:
    var log = document.getElementById('log');
    No DOM elements with an ID of "log" are created by this script, so how does this "log" element magically appear? And how on earth is it related to the element that the _logger variable points to?
    - John S. (pluviosilla@gmail.com)

      Seeing as the log element is never used, it looks like a leftover from a previous incarnation of the code (when the logging box was to be inserted by hand instead of being created in _logger and attached on first use).

        oops! weedpacket is correct, that was a leftover. it is a totally useless line. I will remove it from the above post

          Write a Reply...