How to Diagnose Problems With Javascript

Debugging JavaScript Errors in Code

JavaScript errors are extremely common and knowing some basics about what happens when such notifications pop up can help in addressing them. JavaScript errors do not originate from your computer, but rather the website you are viewing the erroneous code from is the culprit. When the browser is unable to read the code due to an error in programming or a missing component, an error message is displayed. The process of diagnosing errors in code is called debugging.

Things You'll Need

• Visual Studio

Instructions

Visual Debugging

1. Fire up your browser.

2. Click on the "Tools" menu "Internet Options."

3. Click on the "Advanced" tab and under "Browsing" ensure that the following options are enabled:

   Disable Script Debugging (Internet Explorer)
   Disable Script Debugging (Other)
   Display a notification about every script error

   The third option enables an error dialog to pop up automatically when a JavaScript error is detected.

4. Open a web page that contains JavaScript code. Assuming it contains an error, a pop up dialog box will open alerting you to a possible error and recommend possible Debuggers.

5. Select the debugger you would like to choose to open the JavaScript code.

6. Click "Yes" for the prompt that asks whether you want to debug using the selected debugger. This opens up the code in the selected debugger environment (In this case, Visual Studio).

7. Locate the highlighted part of the code. This is cause of the problem. For simple errors, the highlighted error is enough to work out what went wrong and fix it. In complex cases, use the debugging features of your application.

8. Go to the "Debug" menu and locate the appropriate option.

"Debugger" Keyword

1. Run the web page with the JavaScript code to be debugged.

2. Locate the part of the code inside your debugger where there is an alert message that looks something like this:

   alert (response. message);

3. Add the line "debugger" above the alert statement as follows:
   debugger;
   alert (response. message);

4. Click on "Debug" "Windows" "Locals."

5. Locate the "Call Stack" window at the bottom left of the window and double click on the function where the "debugger" keyword was placed.

6. Fix the errors and be sure not to leave the debugger statements in the code.

Tips & Warnings

• When debugging accidentally passed information such as strings, the "locals" window, located under the "Debug" "Windows" menu, can be used to locate a specific part of the code causing problems, along with its properties and values.

• The "Debugger" keyword method is used where a pop up alert with the message "undefined" appears.

References

• Six Revisions: JavaScript Debugging Techniques in IE6
• Sigsiu software: JavaScript conflicts

Resources

• Sigsiu software: Diagnosing JavaScript Problems