Lesson 2: Javascript Errors and Debugging

Overview

In this assignment, you will add some simple Javascript to one of your existing web pages.

Learner Outcomes

At the completion of this exercise:

Finding Bugs in JavaScript

If your JavaScript doesn't work as you expected it to, that might mean you have a bug in your code. tiny image of a bug

Typos are a common source of bugs in JavaScript. If your script isn't working, check the following:

Debugging is the art of finding bugs in your code, and fixing them.

Debugging using Alert

The alert() function can be very useful for debugging code. In the previous lesson, you created a showAlert() function, and added a link to your web page that triggers that function. If you click the link and nothing happens, what went wrong? It could be that there's a bug in the function, or it could be that the function was never triggered because there's something wrong with the link. To test whether there's something wrong with the function, you could add one or more alert() commands in strategic places, like this:

  <script>
  alert ('Javascript is working');

  function showAlert() {
    alert ('function showAlert was called');
    var myText = "This can be whatever text you like!";
    alert (myText);
  }
  </script>

Notice that the first alert() is outside the showAlert() function. Any JavaScript that is not contained within a function will be executed automatically when the page loads, without waiting for any events to occur. If this alert is triggered, you know that JavaScript is enabled in your browser. If it isn't triggered, your browser either doesn't support JavaScript (not likely these days), or JavaScript is disabled (check your browser's settings or preferences).

The second alert() is inside the showAlert() function, but it's the very first command in that function. So if this alert is displayed when you click the link, you know the link is working, so any problems you're experiencing are happening elsewhere in the function. If this alert isn't displayed when you click the link, you know the showAlert() function is never being called. Therefore, there's probably something wrong with the link.

Using alert() can be very helpful for isolating the source of a problem in your script, but you need to be cautious about overusing this technique. Too many alert boxes can be really annoying, especially for your user. The best use of alert boxes is to use them sparingly while you're testing and debugging your script, then remove them once everything seems to be working.

Debugging Using Browser Tools

Some browsers show an icon indicating when a JavaScript error has occurred on the page. For example, some versions of Internet Explorer, if debugging is enabled, will show an icon like this in the lower left corner of the browser:

IE error icon, a black exclamation point in a yellow triangle

If you click on that icon, a dialog will appear that gives you more detail about the bug. Learning to understand these error messages is an advanced skill, but sometimes they can be helpful even for novices, and typically they provide a line number which may help you to isolate the problem.

Activities

Below are a few variations on the code you wrote in the previous lesson. Each of these variations has a bug. Can you identify the bug in each of these examples? Look closely, and when you're finished, see your instructor for the correct answers.

Buggy Example #1

  <script>
  function showAlert() {
    var myText = "Hello world";
    alert (mytext);
  }
  </script>

Buggy Example #2

  <script>
  function showAlert() {
    var myText = "Hello world;
    alert (myText);
  }
  </script>

Buggy Example #3

  <script>
  funcion showAlert() {
    var myText = "Hello world";
    alert (myText);
  }
  </script>

Now, get to know how your browser reports errors (if at all). Try messing up the JavaScript code in your javascript.html page, using the errors from the above examples. With each example, what effect does the error have? Does your browser display an error icon or otherwise give you any indication that an error has occurred? If not, this feature is probably disabled in your browser and would need to be turned on in your browser's settings or preferences.

Also, most browsers today have debugging tools available, either built into the browser, or available for free as downloadable plug-ins. These tools typically include a Console tab that displays script errors if they occur; and a Script tab that allows you to step through your script line by line in order to identify problems. Using these tools is an advanced topic and is beyond the scope of this curriculum, but they're worth a look, and if you're comfortable with them they can be very helpful as you create more and more sophisticated web pages. Here are the developer/debugger tools that are available in several of the most popular browsers, and the steps for accessing them:

All done?

Restore your web page to its original state (with no JavaScript errors) then proceed to the next lesson.