[thelist] Tip: JavaScript - monitoring what your script is doing without using alert()

[Paul Bennett]

Hi all,

I've been in the unfortunate position of having to do some JS development on a live application (simple interface enhancement - no business-critical stuff, fortunately).

As such, I needed a way to see what my script was doing at certain points (kind of like a breakpoint I guess) without foisting alert()'s on our users.

The following did the trick:
<tip type="JavaScript: monitoring what your script is doing ">
The following function creates new DOM nodes just before the </body> 'tag'.
Create new nodes by calling the function like so:

addTestData(myDataGoesHere);


function addTestCode(data) {
	// create new element and add debugging data
	newcontent = document.createElement('div');
	newcontent.setAttribute('class', 'myClassName');
	newData = document.createTextNode(data);
	newcontent.appendChild(newData);
	// add hidden data to dom
	document.body.appendChild(newcontent);
}

You can style the div's (eg hidden / visible / hard to see etc) by applying the appropriate class form your site-wide styles.

A cleverer function would recursively list object properties and array entries - mine isn't that clever.

</tip>