Lesson 1 - Debugging: Introduction and terminology

Sooner or later, everyone involved in programming will encounter the term debugging. But what exactly is it? The origin of the term debugging, literally from English "de-bugging", is attributed to Grace Hopper today. In 1940, when she was working with a Mark II computer, her co-workers discovered a stuck moth in a machine that did not work properly because of that moth. They called the "repair" process debugging. Today, this term refers to the process of debugging in our programs, specifically this course will deal with debugging in JavaScript.

Who is debugging for?

Debugging is one of the basic knowledge of any good programmer. Just as no one can do without for and while loops or if statements, everyone should at least know the basics of debugging. The goal of every programmer is to write the right programs. The game programmer can write the code so that the game runs at 240 FPS, but if the player can shoot the wall over the entire map, no one will be particularly interested in the game.

Mobile applications can also look absolutely great. However, if it crashes when displaying some special characters, which has already happened several times, for example with the iMessage application, it will definitely be a secondary issue. In short, it does not matter in which environment we develop. We are developers and we need to be able to debug our code.

What's going on?

We, as humans, are not perfect. No one writes perfect code, so there are often errors in it. It is therefore important to know how to deal with these errors. That is the essence of this course. In general, we distinguish between two types of errors:

• syntax and
• logical.

Syntax errors

The format of a programming language is called syntax, ie the rules by which JavaScript (we speak of an abstract concept of a language) decides what our code means. For example:

console.log("hello");

The text console means "Object named console ", .log means "Member of the console object named log " (in this case the function), ("hello") means "Call the log function of the console object with the parameters "hello" ". Semicolon ; at the end indicates the end of the line.

Violation of these rules means that our program is down and throws a SyntaxError exception. Examples of syntax errors are:

• unbalanced parentheses,
• missing semicolon,
• typo in the name of a function or variable, etc.

JavaScript, by being dynamically typed, allows us to write code that makes syntactic sense at first glance, but an error occurs only after some time of program execution, often only under certain conditions.

I recently wrote my first Discord bots in JavaScript ( Node.js + discord.js). One of them allowed a group of people to carry out anonymous voting. The bot had a feature that allowed users to enter chat $$majority and if therefore the majority has been reached, then the results are displayed. But there was one catch, namely in this passage:

//...
        } else
        {
            msg.channel.send("There is no majority!".catch(err => console.log(err)));
        }
//...

Did you notice it? After the second quote, the parenthesis is missing, which mysteriously got to the end of the line. This code is syntactically correct. However, if this code is executed, a so-called Uncaught TypeError is created, because the string object does not have a catch() method. Instead of my bot sending the text There is no majority!, if he wrote something to the console, then in that situation the program would have immediately crashed.

Fortunately, I found the mistake relatively easily and quickly. This type of error is caused by the fact that a variable can theoretically be of any type, which is probably the most common problem in JavaScript. There is, for example, TypeScript (I highly recommend it), which has static typing in which such errors would be trivially found. But there are other and more insidious mistakes because they do not print any errors, they just fail quietly ...

Logical errors

Logical errors are special because they are not clear at first glance, and sometimes we are not even aware that we have such errors in our programs. It often happens that our algorithms work for relatively simple inputs, but errors in thinking will only become apparent in more complex situations. Finding logical errors is often difficult and many times they hide where we would least expect them. However, we will explain as best as we can how to solve these mistakes, but also how to avoid them. Lighter categories of logical errors are typos, such as:

function min(a, b)
{
    return a > b ? a : b;
}

In this case, the author certainly meant this:

function min(a, b)
{
    return a < b ? a : b;
}

The difference, purely textually, is one sign, but logically the code gives the opposite results. Or, an absolute classic:

for(let i = 0; i <= a.length; i++)
{
    console.log(a[i]);
}

The author mistakenly wrote <= instead of <. Specifically in JavaScript, for example: a[7] (ie the element just after the end) will be undefined. In other languages, such as C++, this could have catastrophic consequences for our program. But it is much worse to solve the case where our program is simply not logically correct. Then fixing the error is not trivial at all, but we have to find a new solution to the problem.

Debugging - Procedures & Concept of "bug"

The term bug refers to logical errors. Like insects, these bugs are often relatively small, but they can have a far-reaching impact on our program. If we want to be good debuggers, we have to do the right thing. This lesson should be just an introduction to this topic. In the next lesson, we will look at how JavaScript actually works and how to communicate with it via the console. Then we go through:

• JavaScript engines
  • Programs that translate and execute our code. We will learn about the basic functions, what engines exist and how they differ.
• Consoles
  • The console is the basic interface through which we communicate with the engine and browser.
• General debugging procedures
  • Strategy on how to identify the bug, find it in the code, and how to fix it.
• Using Chrome and Firefox
  • In this lesson, we will cover how to use modern browsers and their features for developers.
• Testing
  • Testing is one of the things that is often overlooked. But it is very important! By testing, we try to find errors preventively and correct them immediately. Testing is better than when the error manifests itself in an application that is already running somewhere and we then have to fix the sudden problem.

It is also necessary to keep in mind that a good understanding of the language is good to have, but it is not a necessity. Right in JavaScript we have interesting things like undefined == null vs. undefined === null. I don't mean that we have to be perfect in JavaScript in order to be able to debug it, but not to underestimate the relatively important role that experience with JS plays.

What will we need

To apply the practices from these tutorials, we will need:

• our normal programming environment (IDE)
• modern web browser (Firefox, Opera, or Chrome)

We can also use various frameworks to test the code. When we talk about testing, we'll show you a few. But in order to use them, we will of course have to install them.

In the next lesson, Debugging tools and internet browsers, we will describe the function of JavaScript and tell us how to use tools in browsers for debugging.