Using Alert to Debug your Script

Depending on which Browser and which browser version that you are using, your browser may come with various facilities to assist you in debugging your Javascript code. Just how useful these facilities will be depends on what is provided and how easy it is to use.

There is an alternative method of debugging your scripts that does not depend on what debugging tools that your browser provides but rather makes use of Javascript itself. This method involves using the Javascript alert statement to display information about the values that your javascript is using and also the path through the code that a particular execution is following. Because we are going to use Javascript statements to debug the code, it doesn't matter what debugging facilities our browser does (or doesn't) provide.

The alert statement displays a message box on the screen containing the information that the alert statement was told to display and also an OK button that needs to be clicked to make the alert box disappear. Processing of the Javascript is halted until the OK button in the alert box is clicked. Here is an example of an alert statement that displays fixed information (ie. thew alert always displays the same value when executed:


A series of alert statements like this one (each displaying a different value) can be usefully inserted into various points throughout your code to give you information on:

I find that the easiest way of using an alert statement to do this form of debugging is to select all of the spots where you want to place an alert statement in order to check when the adjacent statements will be executed and place an alert statement at each of your selected points (without worrying just yet about what the alert statement will display). Once all of these alert statements have been placed you then go through them all starting from the top of your code and change the value to be displayed from each alert statement to different values. It doesn't really matter what values you choose as long as each selected value is unique. I find using 'a', 'b', 'c', etc. to be a simple but effective way of clearly identifying which alert statement has generated which alert box.

The other way that you can use an alert statement is to display a variable value or a combination of fixed and variable information. Here is an example of such an alert statement:

 var xyz;
// more code here
alert('xyz = ' + xyz);

This example statement displays both the name of a field and the current value contained within the field. This is the format of the alert statement that I suggest you use in your code where you want to check the value of a given variable at that spot in the code. The advantage to displaying the field name with the value is that if you are going to display the values of more than one field this serves to identify which field you are displaying the value of when the alert box displays it. In addition it is possible that a field could contain the same value as one of the fixed values that you may have used to track your execution path and displaying the field name tells you that this is the value of the specified field and not the execution of the code where you placed the fixed value alert.

By placing alert statements such as these throughout your code, you can see exactly what the code is doing and therefore can determine where and why the code is not working in the way that you intended. The way that I prefer to use alert statements to debug larger Javascripts is to start by placing alert statements at relatively wide intervals throughout the code and then run the script. Most times this identifies the problem area as being in one section of the code. I can then go back and add more alert statements to that particular part of the code in order to gradually narrow down the area of code that I need to search for the cause of the problem.

Once you have identified and fixed the problem, run the script again with the alert statements still in place to verify that the problem is in fact fixed. Once you have confirmed that the code now works correctly you can go back through your code and remove all of the alert statements that you added in order to debug the script.

If your javascript already contains alert statements as part of the actual code then when you add the alert statements for debugging purposes you will need to clearly identify them so that you can tell which are which when you have corrected your code and are ready to remove the alert statements that you added for debugging purposes. The easiest way to do this is to modify the alert statements that you use to debug your script in order to indicate their purpose. The easiest way to do this is to add debug: at the start of the fixed value that the alert statement is to display. You may wish to always do this when adding alert statements for debugging purposes so that you will always know which alert statements (if any) belong as part of the javascript and which have been added to assist in debugging the script.

I will conclude this discussion with an example of javascript code to which debugging alert statements have been added. Note that in this instance there is no actual problem with the code that needs to be found, the statements have been added for the purpose of giving you some idea of how and where to add alert statements to a javascript in order to debug it (the script shown is in fact the one that I use to validate the input fields on the Ask Felgall form). The comments following the added debug alerts are not required when you use this method of debugging but I have added them to give you an indication of why you might place an alert statement at that spot. I apologise for the length of the script but I thought you'd prefer to see a real life example.

var submitted = 0;
var foc = 0;
function everything(form) {
alert('debug: a'); // start of function
foc = 0;
if (submitted) { alert("Form already submitted, please be patient"); return false;}
var text = "You have not correctly filled in the following fields:"
if(isname(form) == false) {
alert('debug: b'); // if statement executed
text += "\n your name is mandatory";
if(isemail(form) == false) {
alert('debug: c'); // if statement executed
text += "\n your e-mail address is mandatory (format you@mail.domain)";
if(isweb(form) == false) {
alert('debug: d'); // if statement executed
text += "\n your web site's url (format http:\/\/something.something)";
if(issubject(form) == false) {
alert('debug: e'); // if statement executed
text += "\n selecting a subject for your query is mandatory";
if (isquestion(form) == false) {
alert('debug: f'); // if statement executed
text += "\n your question is mandatory (why else are you using this form)";
if (foc) { alert(text); return false; }
if (!submitted) {
alert('debug: g'); // if statement executed
submitted = 1;
function isname(form) {
alert('debug: h'); // start of function
if ( == "") {
if (!foc) {; foc = 1;}
return false;
return true;
function isemail(form) {
alert('debug: i'); // start of function
if (!validateEmail(form.replyemail.value,1,0)) {
if (!foc) {form.replyemail.focus(); foc = 1;}
return false;
return true;
function isweb(form) {
alert('debug: j'); // start of function
if (form.web.value == "") return true;
if (form.web.value.indexOf("http:\/\/") == -1 || form.web.value.indexOf(".") == -1) {
if (!foc) {form.web.focus(); foc = 1;}
return false;
return true;
function issubject(form) {
alert('debug: k'); // start of function
myOption = -1;
for (i=0; i<form.subject.length; i++) {
alert('debug: l');// another time around the loop
if (form.subject[i].checked) {
myOption = i;
} }
if (myOption == -1) {
if (!foc) {form.subject[0].focus(); foc = 1;}
return false;
return true;
function isquestion(form) {
alert('debug: m'); // start of function
if(form.question.value == "") {
if (!foc) {form.question.focus(); foc = 1;}
return false;
return true;
function cl(t){
if (t.defaultValue==t.value) t.value = "";


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow