Lesson Wednesday

One of the most important parts of being a developer is debugging. We'll often run into bugs in our code - and the code of others, too. Fortunately, there are many tools at our disposal for debugging JavaScript code. Over the next four lessons, we will cover four commonly used tools that can help you narrow down the source of your bugs:

  • Looking for errors in the DevTools console
  • Pausing on exceptions
  • Using console.log; to log values in our code
  • Using debugger; and breakpoints to freeze our code

We've looked in the DevTools console for errors before - such as when we learned how to see if our project can't find a CSS file in the Debugging HTML and CSS lesson.

However, the other three tools are new.

As an example, we'll use our Madlibs page. We've added some errors to the code that we'll need to debug. Here's the code:

madlibs.html
<!DOCTYPE html>
<html lang="en-US">
<head>
  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/scipts.js"></script>
  <title>A fantastical adventure</title>
</head>
<body>
  <div class="container">
    <h1>Fill in the blanks to write your story!</h1>
    <div>
      <form id="formOne">
        <div class="form-group">
          <label for="person1">A name</label>
          <input id="person1" class="form-control" type="text">
        </div>
        <div class="form-group">
          <label for="person2">Another name</label>
          <input id="person2" class="form-control" type="text">
        </div>
        <div class="form-group">
          <label for="animal">An animal</label>
          <input id="animal" class="form-control" type="text">
        </div>
        <div class="form-group">
          <label for="exclamation">An exclamation</label>
          <input id="exclamation" class="form-control" type="text">
        </div>
        <div class="form-group">
          <label for="verb">A past tense verb</label>
          <input id="verb" class="form-control" type="text">
        </div>
        <div class="form-group">
          <label for="noun">A noun</label>
          <input id="noun" class="form-control" type="text">
        </div>

        <button type="submit" class="btn">Show me the story!</button>
      </form>
    </div>

    <div id="story">
      <h1>A fantastical adventure</h1>
      <p>
        One day, <span class="person1"></span> and <span class="person2"></span> were walking through the woods, when suddenly a giant <span class="animal"></span> appeared. "<span class="exclamation"></span>", <span class="person1"></span> cried. The two of them <span class="verb"></span> as quickly possible, and when they were safe, <span class="person1"></span> and <span class="person2"></span> gave each other a giant <span class="noun"></span>.
      </p>
    </div>
  </div>
</body>
</html>
scripts.js
$(document).ready(function() {
  $("#formOne").submit(function() {
    const person1Input = $("input#person1").val();
    const person2Input = $("input#person2").val();
    const animalInput= $("input#animal").val();
    const exclamationInput = $("input#exclamation").val();
    const verbInput = $("input#verb").val();
    const nounInput = $("input#noun").val();

    $("person1").text(person1Input);
    $(".person2").text(person2Input);
    $(".animal").text(animalInput);
    $(".exclamation").text(exclamationInput);
    $(".verb").text(verbInput);
    $(".noun").text(nounInput);

    $("#story").sho();
  });
});

When I load up this page, fill out the form, and click the submit button, nothing happens. Time to debug!

Checking the DevTools Console

Whenever we are running JavaScript in the browser and something isn't working correctly, the first step is always to open the DevTools console. Too often, when an instructor comes by to help a student debug, we've found that the console isn't even open. That's a surefire sign that the student hasn't done any debugging - which means it's time for the instructor to walk away and allow the student to actually spend time honing this absolutely essential skill.

When we open the console, any glaring errors will show up in red with an X to the left of the message. Meanwhile, warnings will show up in yellow. Generally, warnings won't break our code but they will include messages suggesting something in our code is deprecated or not ideal. Throughout this program, we will ignore warnings. Messages in the console that are red must be addressed.

If we open up the JavaScript console for our Madlibs project, there's an error: Failed to load resource: net::ERR_FILE_NOT_FOUND scipts.js:1:

Console shows an error and a warning.

At the time this lesson was written, there was an error and a warning. The warning appears to be related to a bug in the latest Chrome update - it doesn't affect our code and it's something we can ignore.

The error, however, is breaking our code. It should be a familiar error at this point because we addressed the exact same thing in the Debugging HTML and CSS lesson.

In that lesson, we stated that there are three reasons this error will occur. Either the file doesn't exist, it's in a different directory than the one we specified, or its in the correct place but the name doesn't match the name specified.

In this case, the issue is the third one. We've left the r out of scripts.js in our HTML file: <script src="js/scipts.js"></script>.

Misspelling a filename is a very common error - and one that's not limited to beginners. It's easy to flub a few keystrokes or mistype a filename. Fortunately, debugging makes it equally easy to find and fix this problem. Let's change the filename to scripts.js and reload the page.

While we've fixed one error, nothing happens when we fill out our form and submit it. In the next lesson, we'll learn how to use Chrome DevTools to pause on exceptions and spot another bug.

Using DevTools Console


  • Always have the DevTools console open when debugging.

  • In the console, errors that need to be fixed show up in red while warnings (which don't need to be fixed immediately) show up in yellow.

  • The Failed to load resource: net::ERR_FILE_NOT_FOUND means that a file can't be found. This can occur because there's the file doesn't exist, it's in a different directory than the one we specified, or its in the correct place but the name doesn't match the name specified.

Lesson 43 of 61
Last updated October 12, 2020