print() - A Debugging alternative to alert()

Debugging JavaScript is a difficult task - made even difficult by the fact the we have to depend on the extremely annoying alert() function. Don't get me wrong - alert is a god send when debugging small script. The problem with the function is that you have to click the 'OK' button when you output anything - which will become a major problem when you insert an alert function in a loop with, say, a 100 iterations. Before long, you will get RSI by pressing the space bar. See a Demo.

Other Tools

There are many other tools to debug your scripts including the basic JavaScript Console provided by any good browser(read Firefox), the powerful Venkman debugger or other other javascript based loggers like fvlogger.

print()

The print() function will just create a window similar to the default alert function within the page. You don't have to press the OK key to continue - unlike alert() it just displays the debug info - and lets the script continue.

See it in action...

Code

//print() function will just create a window similar to the default alert function within the page.
//Arguments
// txt  - The message that appears in the box.
// title - The title of the box(OPTIONAL)
function print(txt,title) {
 txt = txt.replace(/\n/g,"<br />");
 if(!title) var title = "Message";
 var template = "<center><div id='print-msg-box' style='width:60%;border:2px outset #fff;background-color:#C0C0C0;'>"+
  "<div style='background-color:#00f;color:#fff;font-weight:bold;padding-left:5px;'>%TITLE%</div>"+
  "<div style='padding-left:5px;'>%TEXT%</div>"+
  "<center><input type='button' value='    OK    ' onclick='document.getElementById(\"print-msg-box\").style.display=\"none\"' /></center>"+
  "</div></center>";

 var to_write = template.replace("%TEXT%",txt);
 var to_write = to_write.replace("%TITLE%",title);

 if(document.getElementById("print-area")) { //If the 'print-area' exists, just write our data into it.
  document.getElementById("print-area").innerHTML = to_write;
 } else { //Else create the element before writing the data.
  var div = document.createElement("div");
  div.setAttribute("id","print-area");
  div.innerHTML = to_write;

  var body = document.getElementsByTagName("body")[0];
     body.insertBefore(div,body.firstChild);
  //OR body.appendChild(div); //This will insert the message box at the end of the page.
 }
}

Call the function like this...

print("Message here");
print("Another Message is here","Title");

As simple as that. You don't have to add anything to the body area. The script will create a DIV element dynamically. If you want the print function to show up in a specific location, just add a <div id="print-area"></div> - the script will detect that and automatically insert the message box there.

To Do...

To keep the amount of code minimal, I have put all the code together. That is I have mixed appearance, behavior and structure together. I know this is a taboo in Web Development. But this is a debug function - it will not be in the finished product. So I am guessing it to be OK. If any one of you like this script so much so as to use it in your site to display non-debug message, please clean up the code. Separate the style elements from the script and put it in a stylesheet. Let that be a homework for you...

Also I have not said anything about what this function could do if used with absolute positioning - so with a little imagination you can go a long way with this function.

Filed Under...

• javascript
• functions
• debugging
• web
• development