JavaScript Debugging

Debugging is process of identifying and reducing the number of bugs or defects in the programs. There several ways to debug the JavaScript :

Using JavaScript Validator

JavaScript can be used to validate data in the HTML documents before sending the content to the server. Validation occur at server side when client had entered data successfully and pressed submit button. We check JavaScript code for errors through the program to make sure that it is valid program. It uses syntax rules of the programming language which are often called as validating parsers or validators which are often available with HTML and JavaScript editors.
We can use validation for some fields such as:

to check whether required field is empty ?
to check whether user has entered valid email address.
to check whether user has entered valid date.
to check whether user has entered text in numeric filed.

The following example shows Validation of JavaScript code.

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
	function validate() {
		var debug = document.forms["myform"]["fname"].value
		if (debug == null || debug == "") {
			alert("Please enter the Name..!");
			return false;
		} else {
			alert("Successful validation...!");
		}
	}
</script>
</head>
<body>
	<form name="myform">
		Enter Name: <input Type="text" name="fname" />
		<input type="button" onclick="validate();" value="submit" />

	</form>
</body>
</html>

var debug = document.forms[“myform”][“fname”].value this line creates variable which has equal value of fname value.
if (debug == null || debug == “”) line contains OR sign which indicates if value is null or empty display the alert message and if input field is empty it returns false.
<input type=”button” onclick=”validate();” value=”submit” /> tag contains submit event when user clicks the submit button and onclick() event occurs when a button is clicked.

Using JavaScript Debugger

JavaScript debugger enables to step through the JavaScript code and examine the state to track the errors. We can place debugger statements anywhere in the program to stop the execution which is similar to setting break point in the code. The debugger statement suspends execution but does not close or clear any files and variables.

Once script has been loaded into debugger, it can be run one line at a time or it can be stopped at certain break points. . If no debugging statement is available then consider the statement has no effect. Once execution is halted, the programmer can examine the state of the script to determine if something is amiss.

There are some debugging steps as follows:

<ul.

Recognize the bug if it exists in the program. It can be done passively. If program detects serious problem, bug can be recognized and error message will be displayed on the screen.
Identify the portion which is causing the error. It involves iterative testing process. By testing input and output iteratively, the programmer can identify where the error is occurring.
Determine cause of the bug which may involve other portions of the program. Sometimes error may be external to the system. Error may occur due to unexpected values, logic error or unexpected values in different fields etc.
After identifying the problem, determine how to solve the problem.</li.
After fixing the problem, it is important to test the program and determine program is running correctly.

JavaScript Debugging in Web Browsers

Google Chrome

We can debug the JavaScript when using Google Chrome as follows:

Open browser, press ctrl+shift+J to open developer tools or press F12 button to open developer tools.
In another way you can also open developer tools i.e. On the web browser ,select Customize and Control Google Chrome with 3 horizontal lines to the right side of the address bar. Click on Tools, the select Developer Tools.
Right click anywhere on a page and select inspect element from menu. Chrome has graphical tool for debugging, you can also debug JavaScript and even you can change CSS rendering on the fly.

The following image will show developer tools in Google Chrome:

Internet Explorer

We can debug the JavaScript when using Internet Explorer as follows:

Open IE developer tools by hitting F12 button in the browser and use provided JavaScript debugger.
You can add breakpoints and watch statements etc. Click the Start Debugging with your script and it should highlight the statement it reaches before erroring.

The following image will show developer tools in Internet Explorer :

Mozilla Firefox

We can debug the JavaScript when using Mozilla Firefox as follows:

Open the browser, click on Tools, select Web Developer -> select Debugger.
You can also select Debugger by using shortcut key Ctrl+Shift+S from the keyboard.
You can also debug the JavaScript by using Firebug. It is pretty well unbeatable for JavaScript development in a browser.

The following image will show developer tools in Mozilla Firefox: