JavaScript: Debugging messages


Maybe its redundant, but I created my own way of adding a 'poor man's debugging' method for JavaScript.

I was annoyed, that I have to use either alert, which pops up a nasty new window, or document.write(ln) which creates a new page. Therefore this debug class, accesses a given section, typically <ul id="unique"></ul>, <ol id="unique"></ol>, <div id="unique"></div> with an specified id, or creates a new <div id="unique"></div> section on top of the page, where any new added debug entry is listed.


Defined area, immediately

    Some messages:


%begin html%
    Some messages:

Undefined area, on click

Click here to get debug output at the head of the document


%begin html% Click here to get debug output at the head of the document %end%



debug.js: JavaScript script for debugging Click to retract Click to retract ...
%begin javascript% /* * debug.js * Debug class for debugging informations * without alert or document.write(ln) methods * but within a given or newly created block element * * Author: P.Zumbruch, * Date: 04 Sep 2007 * */

function debugOutput (id, element) { /* Constructor: data: id: unique attribute id to look for or to create for the output data element: block element to use for the entries [ul, ol, span, ... ] methods: init(id): initializing the object
adding a new text element

*/ this.index = 0; = id; this.element = element;

this.add = add; this.init = init;

init(; }

function add(text) { /* add(text): adds a new element of type element to the output enclosing the textNode filled with "text"

any text
*/ document.getElementById(; document.getElementById([this.index++].appendChild(document.createTextNode(text)); }

function init(id) { /* init(id): initializes the object: i.e.: - it looks for a given element having the attribute id - if not existing, a new "div" element is created and positioned as the first child right of the "body" argument(s):
any valid HTML/XHTML/XML universal attributes id

*/ if ( document.getElementById(id) == null ) { var obj = document.createElement("ul"); var area = document.createElement("div"); = "#999"; = "#000000"; = "2px solid #f00"; = "1ex"; = id; var pos = document.getElementsByTagName("body")[0]; pos.insertBefore(area,pos.firstChild); var header = document.createElement("h4"); var text = "Debug information (" + id +"):"; header.appendChild(document.createTextNode( text )); area.appendChild(header); area.appendChild(obj); area.appendChild(document.createElement("hr")); } } %end%

-- PeterZumbruch - 14 Sep 2007
  • debug.js: JavaScript script for debugging
Topic attachments
I Attachment Action Size Date Who Comment
debug.jsjs debug.js manage 2.0 K 2007-09-04 - 16:38 PeterZumbruch JavaScript script for debugging
Topic revision: r3 - 2007-09-14, PeterZumbruch
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding GSI Wiki? Send feedback
Imprint (in German)
Privacy Policy (in German)