.
CHAPTER 1 n THE STATE OF JAVASCRIPT 6
The script is as follows:
function logger(str){
var el = document.getElementById('logger');
// if the logger container isn't found, create it
if(!el) {
el = document.createElement('div');
el.id = 'logger';
var doc = document.getElementsByTagName('body')[0];
doc.appendChild(el);
}
el.innerHTML += str + '
';
}
var value = 5;
logger('value = ' + value);
The CSS used to give the element a little style and to ensure that it doesn??™t interfere with
the layout is as follows:
#logger {
width:300px;
height:300px;
overflow:scroll;
position:absolute;
left:5px; top:5px;
}
Others have produced some elaborate and useful loggers that work in the same vein. Over
at A List Apart, on online web magazine, there??™s an article on fvlogger (http://alistapart.
com/articles/jslogging). Also, check out the project log4javascript at (www.timdown.co.uk/
log4javascript). The log4javascript project uses a separate window to log messaging, which
can be handier because it??™s not in the way of the current document.
Browser Plug-ins
Browser plug-ins are often beautifully crafted applications that can give you thorough minutiae
on not only JavaScript but also on the HTML and CSS rendered on the page. They can be
a lifesaver for learning what is actually happening on your page.
Pages:
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46