Lesson 2 - Debugging tools and internet browsers

In the last lesson, Debugging: Introduction and terminology , we went through the basic concepts and concepts of debugging and gave an overview of this course.

In today's lesson, we'll show you what debugging tools we can use, and we'll also say a few words about how JavaScript works.

Visual Studio Code, WebStorm and JS debugging

How JavaScript works

The difference that surprises many programmers is that JavaScript is not understood by computers, but by web browsers. It is therefore not a compiled language, but an interpreted language. The compiled language is expressed in the instructions for the target computer after the program is compiled. Thus, the addition method can be directly expressed as an ADD instruction in the source code. On the contrary, in the interpreted language, the program is not directly translated by the target computer, but only by some other program called an interpreter. In our case, it is a browser. The interpreter would recognize our mentioned function for addition only at runtime and would call its own function add(a,b), which would of course be translated back into source code. This translation happens line by line. Of course, there are certain ways that speed up code translation, such as recognizing already known code.

Console

Modern browsers already have built-in development tools for JavaScript and the console is an integral part. We can use it to record information and also help it directly manipulate commands, variables and create new functions.

In Google Chrome and Opera browsers, you can access the console by pressing the keyboard shortcut Ctrl + Shift + J,

In the Mozilla Firefox browser, we will use the shortcuts Ctrl + Shift + K. The images later in the article will come from Chrome, but the consoles in both browsers are almost identical, and if there is a bigger difference, it will be notified.

Change the content of the page using the console

Because classic JavaScript can also be written to the console, we can change the content of the page "at runtime". Let's create an HTML file and a paragraph in it:

<p id="hello"></p>

When we open the page, unsurprisingly, we see a blank page:

Therefore, we open the console and write:

document.getElementById("hello").textContent = "Hello, World!";

And confirm with the Enter key:

We can see that the words we wrote appeared immediately on the page. Of course, this also works for other commands. If we add an empty title to our file:

<p id="hello"></p>
<h1></h1>

It is not a problem to change it later in our console (we must reload the page first):

Creating and reading output

You can also write to the console directly from the source code by calling the console.log() function. Let's create a simple script that writes a simple sentece to our console. So first we create a script.js file, which we import into our HTML page:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="script.js"></script>
        <meta charset="utf-8">
    </head>

    <body>

    </body>
</html>

Insert the following content into the script.js

console.log("Hello world!");

When we open the page, we can't help but notice that something was written to our console. Also to the right of this text, notice the click-through text script.js:1:

After clicking on it, we will find out exactly where the prompt to log to the console came from, and our script will be displayed:

We can format this output using console.table(). Let's create a simple field:

let people = ["John Smith", "Marry White", "Mike Heck"];

We can then list this directly in the console using the already mentioned function and we see that the statement will be formatted into a table itself:

Error tracking and warnings are also an integral part of the console. If your program does not work, there is a good chance that you will find some additional information in the console. We will add the following code to our script:

document.getElementById("left").textContent = "Hi!";

The problem, however, is that there is no element with the ID left on our page. JavaScript, therefore, throws a bug in the console:

If we don't figure out where the error is according to an intuitive error message, the debugger can help us even more. It can help us in that we click on the already mentioned text script.js:1 for the error message. A new tab will appear and the error will be underlined in red:

Commands unrelated to the page

The console can also be used as a test space for our code. We can create entire functions in the console and then call them. We write a simple addition function to the console and confirm:

function add(a, b) {
    return a + b;
}

We call the function we just declared in the console:

add(25, 35);

The two numbers add up:

We can also write trivial commands to the console. Try to write for example 10 + 10.

In the next lesson, Program debugging and breakpoints, we'll tune a small program in JavaScript. We will also show what debugger and breakpoints are.

Article has been written for you by Vlasta

User rating:

No one has rated this quite yet, be the first one!

Passionate reader, student, coder and writer.

Activities