Previous
Next

Developer tools (console)

Why do we need console?


The console is a very useful tool to find an error in our code.
In general, in JavaScript, as in any language, we can make syntax errors. This happens very often even to very experience programmers.

Browsers try to hide the error. This is because is not useful for a user to know that there is an error.
However, JavaScript stops running when it hits the section that contains the error.

As programmers, we want to know where the error happened or what error we have, in order to fix it. This is where we need the console.

Example

Copy and paste the following code into your editor to see the output. Save the file in the folder "temporaryFiles". Next, open the file (Ctrl+O) in your Chrome.  

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of alert()</title>
    <script>
        alert("Hello world";
    </script>
  </head>
  <body>
  </body>
</html>

Where can we find the console?

  • Go to Chrome.
  • Right click and chose “Inspect”. Chose the “Console” box. You are now in the console.

What do you see in the browser?

  • Nothing. The browser hides the errors.
  • Use the console in the developer tools to find the error.
  • What is the error? 
    Uncaught SyntaxError: missing ) after argument list
    .Notice that the console shows the file and the line where the error appears!
  • Fix the error in order for the code to work properly.

The console is an amazingly useful tool and you can do various operations with it.
For example, go to the console and write 5+5 or alert(“Hi”) and hit enter. What do you see?

Previous
Next