inside tomcode.com / javascript Contact monitored by Google Analytics tombits

debug

For Firefox with plugin FireBug:
A little js helper to comfortably display specific Javascript data

  • Uses an output panel (<div id="debug">) to show messages which had been defined in js code with writeIt(myString).
  • Needs some html to be added to the document (see further down)
  • The debugger shows/hides using debug() in the FireBug console
  • The panel has some button actions:
    1. setWriterWidth
    2. show/hide messages
    3. clear message panel
Write something into the debug panel
You can toggle the display of the debug panel in the console with debug()
or by clicking the button

writeIt()

Writes lines into the debug panel

void writeIt(messageString)
messageString the string to display in the panel

debug()

shows / hides the debug panel

void debug()

debug.js
 <div id="debug" style="font-size:12px;position:absolute; top: 1em; right:1em; width:30em; z-index:10000;background-color:black;display:none; border:1em solid red;" >
    <textarea id="writer" style="font-size:12px;white-space:pre; height:50em;width:30em;overflow:auto;z-index:10001;" rows="14" cols="35"></textarea>
    <p style="text-align:right; margin:1em;">
        <input type="button" value="width 60em" id="setWriterWidth" onmouseup="toggle(this, 'writer', 'width', '30em', '60em');" style="display:inline;" />
        <input type="button" value="display none"  id="setWriterDisplay" onmouseup="toggle(this, 'writer', 'display', 'block', 'none');" style="display:inline;" />
        <input type="button" value="clear"  id="clearWriterValue" onmouseup="document.getElementById('writer').value = '';" style="display:inline;" />
    </p>
 </div><!-- /debug -->