Troubleshooting your JavaScript and jQuery script is made much easier with the ais of diagnostic tools such as the Error Console for Firefox

Where to get the Firefox Web Developers Tools

The Web Developer Tools Extension for Firefox are available at:

Firefox Tools: Error Console

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

You need to have the Firefox Browser installed on you computer. Firefox has versions for PCs and Mac operating systems.

When you get to the link mentioned above, click on the button that says Add To Firefox. Be sure you enable it from the Tools -> Add-Ons interface.

The Web Developer Tools have a multitude of other features that you will find invaluable.

The Error Console will work on debugging JavaScript, jQuery and other scripting languages.

The Web Developer extension for Firefox is developed by Chris Perderick.

How to use the Error Console for Firefox

The Error Console for Firefox

First, let us mention that the Error Console under Tools in the Web Developer Toolbar for Firefox, has been DEPRECATED.

This means that is no longer being developed and only minimally supported. It has supposedly been replaced by the Web Console. Unfortunately, the Web Console does not work well if you have FireBug installed (go figure). The Error Console is easier to use and faster to access and is not nearly as fussy as the Web Console, so we continue to use the Error Console as long as it is still made available.

Open up your document in the Firefox browser by typing the URL or local path into the address bar in the Firefox browser.

As you are testing the script for the tutorials or whatever JavaScript / jQuery scripts you are running, you can pull down Tools -> Error Console.

You want to clear out any old error reports and refresh the web page. Leave the Error Console dialog box up (don't close it), then click on the refresh button for your browser. You will need to go back to the dropdown and go fetch the Error Code dialog box again if you have just one monitor, but the old errors will be gone and you will see just the ones for this individual document.

Error Reports with the Error Console

The Error Console will look at broken code and likely pinpoint the pace where you left out a colon, a curly bracket, or other punctuation, if it is that simple.

If for some reason you have failed to properly link to the jQuery library files required for your script, it will stop the script in its tracks. You won't get down to the nitty-gritty of punctuation, you will simply see this message:

ReferenceError: $ is not defined

file:///C:/jquery-tutorials/tutorial-6.html

What this means is that the dollar sign $ is not being recognized right from the start. If you see this, check the path on the <script> tag to your jQuery .js file and/or check that the file exists where you say it is.

The error message also tells you the path to what file the error is occurring.

Once you get past this hurdle, your script may still not be working at all. JavaScript and jQuery are very particular. You must have the punctuation just right or it breaks the entire code. It goes nowhere, it does nothing.

An omission as simple as a closing or mixed quotation mark will bring your code to a halt. This is why the Error Console is so invaluable. It will tell you not only what is missing and point it out to you, it tells you what line the error is on.

SyntaxError: unterminated string literal

file:///C:/jquery-tutorials/tutorial-6.html

      $("h1).append(visitorName);     Line 10

_____ _↑

The Error Console can warn you of much more complex issues as well. As you get to working with it, you will become more savvy as to what it is telling you about the inner working of your script.