About: Debugging

If you're human, and you're new to this, then there's a good chance you've already fucked up something in the process and shit isn't working so smoothly. So now would be a good time to talk about debugging your JavaScript.

Here are a few of my rules:

  1. Write small chunks of code. The smaller your functions, the easier it'll be to find where they're failing and thus fix them.

  2. Make sure you type your code yourself and not copy/paste it. By typing it, even if you do so verbatim, you work on your typing speed and skills and it forces you to go word by word and try to understand what you're doing. When you're just copying someone else's code (how dare you!), you sometimes overlook some of what they've done and thus miss on all the fun learning. So type, you lazy bastard!

  3. Test your code often. I'm not talking about writing tests here (which is something every developer should know how to do and do, but is not within the scope of this book), but simply open your Console, type in your functions, and test invoking them with several different arguments until you get the expected result. But try to understand why things aren't working and not just keep trying different variations till you hit jackpot.

  4. Use the debugger statement often. Chrome (and other browsers) has this nifty statement called debugger. Want the browser's interpreter to halt execution of your code in the middle of your function so you can inspect what's going on around you? No problem!

    Here's how it's done:

    var add = function (num1, num2) {
      debugger;
      return num1 + num2;
    }

    Not sure how the above function works? Wanna make sure it does what it should? Maybe it's broken? No worries my friend. Type the above function as is (with the debugger statement in it) in your browser's Console and hit Enter.

    Now invoke it like this:

    add(3, 6);

    And if everything worked as planned, the Debugger tab should now be highlighted. Click on it and you should see how your browser is now stopped in the middle of the function execution where you put the debugger statement.

    That means that you can now access the function arguments no problem. Simply hit the escape key to open your interactive Console from the Debugger tab, and now you can inspect your local function variables. Type num1 and hit Enter and you'll see what's in it (3). Type num2 and you'll get 6. If you don't wanna do all that typing (poor thing), simply hover over the variables with your mouse and Chrome should be kind enough to show you their values in a small tooltip (text baloon thingy).

    To resume the execution of the function, press the little Play icon on the top left corner of your Console.

  5. Use the console.log method often. If you're more old school and you don't wanna stop the function's execution in the middle, you can simply check on your function's progress via some console.log statements thrown all over the place:

    function add (num1, num2) {
      console.log("Num1: " + num1, "Num2: " + num2);
      var result = num1 + num2;
      console.log('Result: ' + result);
      return result;
    }
  6. Use Chrome's Network tab when debugging HTTP requests. So now let's say you wanted to test our previous function, makeRequest. In order to do so, simply type the function as is in your Console (or just save it as a separate HTML file and run it from your browser):

    function makeRequest(url, callback) {
      var xhrObject = new XMLHttpRequest();
      xhrObject.onload = function () {
        var parsedResponse = JSON.parse(xhrObject.responseText)
        callback(parsedResponse);
      };
      xhrObject.open('GET', url, true);
      xhrObject.send();
    }

    and now invoke it with a valid URL:

    var url = 'https://freemusicarchive.org/api/trackSearch' +
      '?q=like%20a%20virgin';
    
    makeRequest(url, function (response) {
      console.log(response);
    });

    What happened there? Well we've invoked our makeRequest function. If you wanted to see some more about the request the browser made on your behalf, you could navigate to the Network tab and look at the last request (most likely last) that was sent. See how it shows that it finished successfully (most likely)? It has a green circle next to it and the number 200 which indicates a successful request. If there's nothing there, invoke it again!

    Go ahead, be Dora the Explorer and click around. Click on your request and then click on some of the different tabs you have on the right: Headers, Params, and Response. That should give you some insight on how the internet works. You'll start making sense of it with time.

So now that you're a badass at debugging code, we can continue our progress. Not before you get yourself a donut to get those sugars flowing in your system. I'm assuming you're into this stuff so much, you've forgotten to eat.

Table of Contents
Home