Lesson 3.3. Console.log

Developer tools

The majority of contemporary browsers include a developer tools menu. You can usually access it with right click and then the Inspect option. There are also relatively standard shortcuts between browsers:

If none of the above solutions work, you will have to search the Internet or in your browser's menus to find out how to access them.

Exercise: the development tools contain a console which is very much used in JavaScript. I have programmed a message that should be displayed in the console of this page. Open the console and find my message.

Note : development tools, in particular the console, are tools for developers. They are relatively powerful and allow to access different information on the page, including personal data. They also allow to access and modify the content of the pages (obviously only in the browser, not on the server). If you open the console on Facebook, here is what is displayed :

Prevention message in the Facebook console

Note : it is also in the console that any error messages are displayed.

Write in the console

When developing code in JavaScript, we often need feedback to verify that the code is is runing correctly. During the development phases, it is possible to write to the console with the console.log() function. For example:

console.log('My first message in the console');

The quotation marks indicate that the message is a string (in other words, text). We'll come back to this later, but if you want to display a variable, you must not use quotation marks:

var x = 12;
console.log(x);

Note: in JavaScript, each statement ends with a semicolon (;). This tells the to the interpreter (the JavaScript engine) that the instruction is over.

Messages in the console are useful during the development phases. When the site is deployed (publicly accessible), these messages should be removed in order to :

Exercises

Exercise 1

Open the console on this page and type the following line. Don't worry if you don't understand this command, only the result is of interest here.

document.getElementsByTagName("h1")[0].innerHTML= "I replaced the title!"

Look at the title at the top of this page. What happened?

Exercise 2

Consider the following HTML code:

<html>
  <head>
  </head>
  <body>
    <h1>Message in the console</h1>

    <!-- Insert your JavaScript ici -->
    <!-- The code have to display a message in the console -->

  </body>
</html>

Add some JavaScript code that displays Bonjour le monde ! in the console using the console.log() function. When it works, add a second line that will display It means Hello World! Here is an example of what should be displayed in the console:

Hello world in the console with console.log

Quiz

What are the development tools for?

Check Bravo! The browser development tools are client-side (not server-side). Try again...

How do instructions end in JavaScript?

Check Bravo! Each line ends with a semicolon to indicate to the interpreter that the instruction is finished. Try again...

What are quotation marks used for in JavaScript?

Check Bravo! The technical name of a text in computer science is "string". Try again...

Why do I have to delete the messages in the console when publishing a site?

Check Bravo! It is always better to clean up before deploying a site. Try again...

See also


Last update : 10/03/2022