How to find and fix errors in Javascript

: How to get started with Blogger >

Trying to write some Javascript, but can't figure out why it's not working? This tutorial might make your life easier.

Setting up

First, if you currently use Internet Explorer, it's time to switch to Firefox. I think everyone should at least give Firefox a try, but I understand that not all users want to. However, if you're doing anything technical, you need Firefox. Internet Explorer does not have friendly error messages when it comes to Javascript. Half the time it doesn't even tell you what's wrong.

You can get Firefox here: http://www.getfirefox.com

Next, you need to get an add-on called Web Developer. If you already have Firefox but you don't have this add-on, or you only just downloaded Firefox, go and get Web Developer from here: https://addons.mozilla.org/en-US/firefox/addon/60

You'll need to restart Firefox before Web Developer will finish installing. Once you've done that, read on!

Orientation

After installing Web Developer, you'll see a new icon on the toolbar - see the screenshot below.



Click it and a new toolbar will appear.



When you're writing a script, keep this toolbar open. Don't worry too much about most of the features in Web Developer for the time being. Just keep an eye on the grey circle at the end.

What happens when an error occurs?

Let's look at a simple example just so you can see an error. Here's the code I'm using:

<p><a href="#" onclick="brokenFunction();">This link will generate an error</a></p>

That's all I'm putting on the page (apart from the header and footer code that's automatically included on all pages on my server -but that won't affect this script). The error is caused by the fact I'm calling a function that doesn't exist. All I have to do is click the link to trigger the error. Let's do that.

Here's what happened when I clicked the link:



The grey circle changed to a red exclamation mark. Clicking on the exclamation mark will display details about the error in the Error Console.



Better still, clicking on the link that appears beneath the error description will display the source code and take you directly to the line that caused the error. This is absolutely essential if you want to get your Javascript to work.

Did you like this post? Subscribe today!

Comments

Name *
Email *
URL
* Required Fields. Email will not be shown.
Verification:	Type the message into the box below. The letters are case sensitive.
Help Enter your comment:
Rate this article: 5 4 3 2 1 No rating (5 = Highest, 1 = Lowest) Note: if you have already posted a rating on this page, a new vote will not be added.