Debugger

[fside]

It seemed a bit of a trivial routine to put here. People can use development tools in Firefox, for example. And probably many already have something like this, anyway. But you never know.

Sometimes you can't use "alert" for debugging. It throws things off, particularly with all the timed callbacks people use today for FX. So, instead, you take your variable states and put them in a div, instead. Simple.

So, to do that, you put the style in your main style sheet. You put the function code in your main js file. And to use it, just call the function - bug(var1, var2 . . . ); - anywhere in your code. If the variables don't matter, just use - bug('here'); - or something just to show exection is reaching that point. The last/most recent bug values will be at the top of the list in the div. It 'pushes' previous results down each time.


var C = {
container: "mainContainer",
debug: "debugger"
}

function bug(){
cd = $(C.debug);
if (cd){
cd.innerHTML = "<br>" +cd.innerHTML;
cd.style.display = "block";
for (var i=arguments.length-1; i >-1; i-=1){ cd.innerHTML = [i>0 ? ", " : "", arguments[i]].join("") +cd.innerHTML; }
}
}

D.newEl(C.debug, C.container, "div", "onclick='this.innerHTML=\"\"'");


D.newEl is whatever you use to add new elements to the DOM. I use the function shown in the Add/Hide thread posted right here in this forum. And "mainContainer" would be a div just inside the BODY tags.


#debugger {
display: none;
position: absolute;
text-align: left;
bottom: 0px;
right: 0px;
width: 600px;
height: 300px;
border: 4px solid #000;
background: #fff;
overflow: auto;
z-index: 1000;
}

[oesxyl]

missing $ definition, :) ... or framework name, :)

regards

[fside]

missing $ definition, :) ... or framework name, :)

regards

Someone suggested lookups could slow things. I haven't run any tests, myself. But if true, one could try this for the $ (of course Resig goes 'nuts' with his jquery $ - but this one is just get ID).


var DOMids = { };

var $ = function(strID){
if (!DOMids[strID]){ DOMids[strID] = document.getElementById(strID); }
return DOMids[strID];
};


And you mentioned the - D object. That's the namespace. But I left it to whoever to implement that line. So if they want newEl, they can copy from the Hide/Add message in this forum. But if they want to use createElement directly, they can do that. I kind of left it a bit loose.

Sometimes it's difficult to copy/paste, when you're pulling it from a larger structure.

In this case - the whole file, the entire script, is surrounded by an anonymous function. And the "D" is broken outside by using - window.D = { }. And then everything attaches to D, or is a var inside the anonymous function. And so in that case, the newEl function attaches as a method to D, as well - D.newEl = function( . . .){ }.