Lesson Wednesday

This is the third of four lessons on debugging in JavaScript. Over the last two lessons, we've covered two techniques for debugging - and fixed two bugs in our Madlibs project - but the code still isn't working. In this lesson, we'll learn how to use console.log() statements to help us debug. In the process, we'll also cover a very common error for JavaScript beginners - and how to easily spot it.

console.log() is a very commonly used tool in the JavaScript developer's toolbox. This method does exactly what it sounds like: logs a message to the console. In order to read the logged messages, the DevTools console must be open.

Let's drop a few console.log() statements into our Madlibs script file.

scripts.js
$(document).ready(function() {
  console.log("Script executing!");
  $("#formOne").submit(function() {
    console.log("Submit form successfully reached.");
    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").show();
  });
});

We add console.log("Script executing!"); to the second line of our script to confirm it's running. (We already know our script is executing - but this is a good way to demonstrate what console.log() does.)

Next, we put console.log("Submit form successfully reached."); inside our submit() function call.

Save the script and refresh the page in the browser. Make sure the DevTools console pane is open. We'll see Script executing! as expected. Now let's try to submit the form - but pay very close attention to the console while you do.

You'll see that our second message very briefly logs to the console and then disappears. So what exactly is happening?

This is a very common error, especially for beginners, and there are a couple of clues that show what's happening.

Whenever a result flashes across the screen - or the console like this - it suggests that the code is executing correctly but that the page is reloading.

Remember that the default behavior of the submit() method is to load a new page. That means that by default, the page will refresh unless we prevent that default with event.preventDefault().

There is another subtle but important clue that let's us know when we've forgotten to add event.preventDefault() to our code. Check the URL after you submit the form and you'll see a ?. The ? mark indicates that we've done a GET request with a form. We'll learn more about GET requests in the future, but this means making a request to a server. If we prevent the default, we don't make a GET request. We just stay on the page and no ? is added to the URL. We'll demonstrate this in a moment after fixing the issue:

scripts.js
$(document).ready(function() {
  console.log("Script executing!");
  $("#formOne").submit(function(event) {
    event.preventDefault();
    console.log("Submit form successfully reached.");
    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").show();
  });
});

We've made one change to our code - we've added event.preventDefault(). If the ? is still at the end of the URL, remove it. Now try filling out the form. The text from our fantastical adventure will appear - and both messages will be properly logged to the console. Finally, check out the URL - a ? wasn't added.

If you ever find that a form submission isn't working correctly, checking the URL for a question mark is the first - and easiest - debugging step.

As noted in the example above, console.log()s can be useful for seeing which code is reached. However, we can use console.log() for other bugs, too - including the next issue we are having with our Madlibs story.

Here's how our story looks now (yours will look a little different depending on the words you input into your form):

"One day, and Jayne were walking through the woods, when suddenly a giant cat appeared. "Whoa!", cried. The two of them clapped as quickly possible, and when they were safe, and Jayne gave each other a giant banana."

We are getting some input but not all of it. Specifically, the first person's name isn't showing up.

We'll start by illustrating how we can use console.log()s to help us debug. In the next lesson, we'll demonstrate a more sophisticated approach to solve the same problem using the debugger tool.

So where should we put the console.log() in our code? Let's take a moment to think about where our code could be going wrong. We know a user can put text in each field and then submit the form - and that our form is properly submitting. Let's start by checking to see what our script thinks the value of person1Input is. Note that we've removed the previous console.log() statements because we don't need them anymore.

scripts.js
$(document).ready(function() {
  $("#formOne").submit(function(event) {
    event.preventDefault();
    const person1Input = $("input#person1").val();
    console.log(person1Input);
    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").show();
  });
});

When we submit our form again, the DevTools console will correctly show the name from the form. We haven't found the error yet but we've eliminated one possibility. We've confirmed that our script is correctly pulling the value of the form field and then saving it in a variable. That means that our application is having a problem displaying the value, not retrieving the value of the form field.

We are displaying the value of the first person's name in the following line:

$("person1").text(person1Input);

We already know that person1Input is working correctly - that means there's something wrong with $("person1"). You may already see the error - but bear with us anyway! You'd be surprised at how often jQuery errors come up - and how long it can take students to find them without good debugging practices.

console.log() isn't very helpful for our next debugging step - we'll learn a better tool to fix this final bug once and for all in the next lesson.

console.log can be a very useful tool, especially for beginning developers. We can use it to quickly check if code is being reached or to see the value of a variable as we do above. However, there are two things to consider about this tool. First, it's not as efficient as other debugging tools. It's definitely good to have in our toolbox, but usually it won't be the first tool we reach for. Second, once you are done debugging, you need to go back and remove console.log() statements from your code. They won't break anything but they make your finished code look sloppy. They are clear evidence of the debugging process - and should never be in portfolio-ready or production code. You will always be expected to remove any console.log() statements from your Friday projects by the end of the day.

We've come to the end of our third lesson on debugging with JavaScript - but our code still isn't working and we have one more important tool to cover: using debugger and breakpoints to freeze and take a closer look at our code.

Debugging Using console.log()


  • console.log() allows us to log messages in the DevTools console. It can be helpful for making sure code is reached or checking the value of variables.

  • Don't forget that the default behavior of the submit() method is to load a new page. We don't want to do that so we need to use event.preventDefault() to prevent that behavior.

  • We can tell that our application has attempted to make a GET request to a server (and to reload the page) if a ? is added to the end of the URL.

  • If you add console.log() statements directly to your code, make sure to remove them after you are done. Otherwise, your code will look sloppy.

  • While console.log() is a useful tool, don't overuse it. Adding breakpoints and other debugging tools are generally more effective.

Lesson 45 of 61
Last updated July 30, 2020