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:

F12
Ctrl + Shift + i
Ctrl + Shift + j

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 :

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 :

to optimize the display of the pages;
not to pollute the console which is also used for error messages;
and not to give information to hackers.

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:

Faire l'exercice en ligne

Solution

Quiz

What are the development tools for?

To create web servers.

To display messages during the development phase.

To display variables.

To display error messages.

Check

How do instructions end in JavaScript?

With a dot .

With a colon :

With a semi colon ;

There is no character to indicate the end of the instructions.

Check

What are quotation marks used for in JavaScript?

To indicate the beginning and end of the JavaScript code.

To indicate the beginning and the end of a text.

To indicate the beginning and end of a string.

To indicate the beginning and end of a comment.

Check

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

To optimize page display.

So as not to make it easier for hackers.

To avoid confusion with the error messages.

No need to delete them, we can leave them.

Check

Cours 3.2 Sommaire Cours 3.4

Lesson 3.3. Console.log

Developer tools

Write in the console

Exercises

Exercise 1

Exercise 2

Quiz

See also