• 8 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 17/12/2018

Console

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

The JavaScript console in Chrome, or just the Console for short, is an extremely powerful tool that lets you enter JavaScript or jQuery commands that interact with the web page you're currently viewing.

You can even write JavaScript or jQuery in your own page, log statements therein, view it in Chrome, and see exactly the diagnostic information you needed. 

The Console is so important, it even has its own keyboard shortcut! Type Command + Alt + J (Mac) or Control + Shift + J (Windows/Linux).

Let's take a simple example at first. You can write pure JavaScript in the Console and execute it. Let's say I want to combine two strings, "Hey " and "friends!" to make a complete sentence.

I'd type the following code directly into the console, hit enter, and I'd get my result of "Hey friends!"

console.log('Hey ' + 'friends!');
Simple JavaScript executed in the console
Simple JavaScript executed in the console

The console is a great tool for those starting to learn JavaScript or jQuery, since it allows instant results from code you want to test.

If you have any code files locally, you should try to run console.log from within your code file, and then open up the console in the browser. You'll see the same result! 

jQuery in the console

You can also run jQuery (an open-source JavaScript library) from within the console. To do so, make sure that the page you're on has jQuery included as part of the code!

For example, here on this course page, open up your JavaScript console. Paste the following line of code inside:

$('body').css('background-color', 'orange');

You'll notice the entire page background color changes! Here, you've run a jQuery command that identifies the background-color CSS property and updates its value to orange. Of course, when you reload the page, the modification is no longer there. 

Using jQuery in the console
Using jQuery in the console

Try out some of your own JavaScript or jQuery commands in the developer tools console now!

Exemple de certificat de réussite
Exemple de certificat de réussite