Javascript is a client side scripting language that executes script inside your browser.  It can be used to perform different tasks (validating a form, updating information, etc) on your browser without having to make a trip back to the website you are visiting.

To demonstrate how to debug a JS error, first we need to create one.  To do this, I removed the validate.js file from /media/system/js/.  This file is used to validate forms before they are submitted back to the website.  If the form is not valid, the inputs will turn red to indicate to the user that there was an issue.

Once I removed the file, I navigated to the user registration page (index.php?option=com_user&view=register).

Firefox

If you have the Web Developer add-on for Firefox, you will see a notification in the top right corner of your browser (see the ! under the Google search).  If you do not have the Web Developer add-on, you can still get to the Error Console.

You can access the error console by going to Tools -> Error Console in the menu or clicking on the Web Developer ! icon:

This will then display our Error Console.  You can use the Clear button to clear all javascript errors.  You can also change the filter to display different message types.  In most cases, you will only be interested in Errors.

When you are checking for javascript errors, look for errors in the Error Console both when the page loads as well as when you perform the action that is causing the issue.

Internet Explorer

Internet Explorer will display an icon in the bottom left hand corner when there is a Javascript error (see the ! next to Done):

If you hover over the icon, it will display the error.  Double clicking it will bring up the following window with information about your error:

Safari

Safari takes a little more work because the debugging features are hidden by default.  To enable them, you have to follow these instructions.

Once you have that turned on, you will get a new Develop menu:

Selecting "Show Error Console", will show a debug window at the bottom of the browser:

Now What?

Finding your Javascript error will only point you in the right direction.  Figuring out the problem and fixing it can be a difficult process.  Most browsers have tools either built into them or add-ons that allow you to debug the Javascript code.  Since debugging Javascript can be pretty complex, we will leave that for a future article.