Exécuter JavaScript dans la console

Kayce Basques

Ce tutoriel interactif vous explique comment exécuter du code JavaScript dans la console des Outils de développement Chrome. Consultez Premiers pas avec la journalisation des messages pour découvrir comment consigner des messages dans la console. Consultez Premiers pas avec le débogage de code JavaScript pour découvrir comment mettre en pause le code JavaScript et le parcourir une ligne à la fois.

Figure 1 : La console.

Présentation

La console est un REPL (Read-Evaluate-Print-Loop). Elle lit le code JavaScript que vous y saisissez, l'évalue, affiche le résultat de votre expression, puis revient à la première étape.

Configurer les Outils de développement

Ce tutoriel est conçu pour que vous puissiez ouvrir la démo et essayer vous-même tous les workflows. Lorsque vous suivez physiquement les étapes, vous êtes plus susceptible de vous souvenir des workflows par la suite.

1. Appuyez sur Cmd+Option+J (Mac) ou Ctrl+Maj+J (Windows, Linux, ChromeOS) pour ouvrir la console, ici même sur cette page.

   

   Figure 2 : Ce tutoriel à gauche et les Outils de développement à droite.

Afficher et modifier le code JavaScript ou le DOM de la page

Lorsque vous créez ou déboguez une page, il est souvent utile d'exécuter des instructions dans la console pour modifier l'apparence ou le fonctionnement de la page.

1. Notez le texte du bouton ci-dessous.

   Hello, World!

2. Saisissez document.getElementById('hello').textContent = 'Hello, Console!' dans la console et puis appuyez sur Entrée pour évaluer l'expression. Notez comment le texte à l'intérieur du bouton change.

   

   Figure 3 : Apparence de la console après l'évaluation de l'expression ci-dessus.

   Sous le code que vous avez évalué, vous voyez "Hello, Console!". Rappelez-vous les quatre étapes du REPL : lire, évaluer, imprimer et boucler. Après avoir évalué votre code, un REPL affiche le résultat de l'expression. Par conséquent, "Hello, Console!" doit être le résultat de l'évaluation document.getElementById('hello').textContent = 'Hello, Console!'.

Exécuter du code JavaScript arbitraire qui n'est pas lié à la page

Parfois, vous avez simplement besoin d'un terrain de jeu de code où vous pouvez tester du code ou essayer de nouvelles fonctionnalités JavaScript que vous ne connaissez pas. La console est l'endroit idéal pour ce type d'expériences.

1. Saisissez 5 + 15 dans la console. Le résultat 20 s'affiche sous votre expression (sauf si l'évaluation de votre expression prend trop de temps).
2. Appuyez sur Enter pour évaluer l'expression. La console affiche le résultat de l'expression sous votre code. La figure 4 ci-dessous montre l'apparence de votre console après l'évaluation de cette expression.

3. Saisissez le code suivant dans la console. Essayez de le saisir caractère par caractère plutôt que de le copier-coller.

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

4. Appelez maintenant la fonction que vous venez de définir.

   add(25);
   

   

   Figure 4 : Apparence de la console après l'évaluation des expressions ci-dessus.

   add(25) donne 45 car lorsque la fonction add est appelée sans deuxième argument, b est défini par défaut sur 20.

Vous ne pourrez exécuter aucun code dans cette session de console tant que votre fonction n'aura pas renvoyé de résultat. Si cela prend trop de temps, vous pouvez utiliser le Gestionnaire des tâches pour annuler le calcul intensif. Toutefois, cela entraînera également l'échec de la page actuelle et la perte de toutes les données que vous avez saisies.

Étapes suivantes

Consultez Exécuter du code JavaScript pour découvrir d'autres fonctionnalités liées à l'exécution de code JavaScript dans la console.

Les Outils de développement vous permettent de mettre en pause un script au milieu de son exécution. Lorsque vous êtes en pause, vous pouvez utiliser la console pour afficher et modifier la window ou le DOM de la page à ce moment précis. Cela permet de créer un workflow de débogage puissant. Consultez Premiers pas avec le débogage de code JavaScript pour suivre un tutoriel interactif.

La console est également compatible avec un ensemble de spécificateurs de format. Consultez Mettre en forme et styliser les messages dans la console pour découvrir toutes les méthodes permettant de mettre en forme et de styliser les messages de la console.

En dehors de cela, la console dispose également d'un ensemble de fonctions pratiques qui facilitent l'interaction avec une page. Exemple :

• Au lieu de saisir document.querySelector() pour sélectionner un élément, vous pouvez saisir $(). Cette syntaxe s'inspire de jQuery, mais il ne s'agit pas de jQuery. Il s'agit simplement d'un alias pour document.querySelector().
• debug(function) définit effectivement un point d'arrêt sur la première ligne de cette fonction.
• keys(object) renvoie un tableau contenant les clés de l'objet spécifié.

Consultez la documentation de référence de l'API Console Utilities pour découvrir toutes les fonctions pratiques.