VirtualMV/JavaScript/Case Study: Forms/De-bugging

Debugging

Ok, so what if you make a mistake in your code. How can you find out what is wrong.

Using comments to debug

A simple way to check your code is to use the comment feature. So if you have an error comment out the code - either html or JS and keep commenting until the code works!

<!--     
HTML Comments 
//-->

// JavaScript One line comment     
/* JavaScript Multiline comments 
*/

Using Alert to see what is happening

Another technique is to use the alert box to show things like "I'm here" or what value a variable actually contains.

Using the Browsers built in debugger

Fortunately most modern web-browsers have tools you can use that will help. Which Browser you use is a matter of individual choice, so I'll try to briefly explain how different ones work. First though you need to add an error to your code so you can see how the de-bugger works. Lets show you how this works by making a real easy error. Add "Error" to fnCheckOK for the Address check.

  function fnCheckData() {
// Check Name, Address & Phone
	fnCheckOK(document.myForm.txtFullName);
	fnCheckOKError(document.myForm.txtAdd);
	fnCheckOK(document.myForm.txtPhone);
}

Now we'll show how various browsers can be used to debug this.

Microsoft Internet Explorer

Contrary to popular belief, IE actually has a very good debugger. To use

1. Load the HTML page into IE.
2. Press [F12]
   • This will open up a new Developer Window.
   • Click on the "Script" Tab

This will show a split window with the code on the left and an error window on the right. Arrange both the IE window (with the HTML file) and the Developer Window on the screen.

So as we have put an error into our js file click on the "Check Data" button on the HTML Form and you should see the error displayed with a line number.

Experiment with the Developer Window as it also has tools for css.

Google Chrome

1. Load the HTML page into Chrome.
2. Press [F12]
   • This will open up a new Developer Window.
   • Click on the "Console" Tab

So as we have put an error into our js file click on the "Check Data" button on the HTML Form and you should see the error displayed with a line number.

On the far right you will see the file with the error and line number. If you click on this you will be switched to the "Sources" Tab and the error and line will be shown.

Experiment with the Developer Window as it also has tools for css.

Firefox

For Firefox the Firebug extension will give you a neat tool to debug your code. (I think you can edit the code directly in Firebug)

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Case Study: Forms/De-bugging. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 23, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Case_Study:_Forms/De-bugging    (zotero)