Exécuter JavaScript dans la console

Kayce Basques

Ce tutoriel interactif vous montre comment exécuter JavaScript dans la console Outils pour les développeurs Chrome. Consultez la section Premiers pas avec les messages de journalisation pour apprendre à journaliser des messages dans la console. Pour découvrir comment mettre en pause le code JavaScript et le parcourir ligne par ligne, consultez la page Premiers pas avec le débogage JavaScript.

Figure 1 : La console

Présentation

La console est une REPL, qui signifie Lecture, Évaluation, Impression et Boucle. Elle lit le code JavaScript que vous y saisissez, évalue votre code, imprime 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émonstration et tester par vous-même tous les workflows. Lorsque vous suivez physiquement, vous êtes plus susceptible de vous souvenir des workflows par la suite.

1. Appuyez sur Commande+Option+J (Mac) ou Ctrl+Maj+J (Windows, Linux, ChromeOS) pour ouvrir la console, directement sur cette page.

   

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

Afficher et modifier le code JavaScript ou DOM de la page

Lors de la création ou du débogage d'une page, il est souvent utile d'exécuter des instructions dans la console pour modifier son apparence ou son exécution.

1. Notez le texte du bouton ci-dessous.

   Hello World

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

   

   Image 3. Aperçu de la console après l'évaluation de l'expression ci-dessus.

   Sous le code que vous avez évalué, "Hello, Console!" s'affiche. Rappelez-vous les 4 étapes de la REPL: lecture, évaluation, impression, boucle. Après avoir évalué votre code, une REPL imprime le résultat de l'expression. "Hello, Console!" doit donc être le résultat de l'évaluation de document.getElementById('hello').textContent = 'Hello, Console!'.

Exécuter un code JavaScript arbitraire sans rapport avec la page

Parfois, vous avez simplement besoin d'un simulateur de code dans lequel 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 effectuer ce type de tests.

1. Saisissez 5 + 15 dans la console. Le résultat 20 apparaîtra sous votre expression (sauf si l'évaluation de l'expression prend trop de temps).
2. Appuyez sur Enter pour évaluer l'expression. La console imprime le résultat de l'expression sous votre code. La figure 4 ci-dessous montre à quoi doit ressembler 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 et de le coller.

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

   Si vous ne connaissez pas la syntaxe b=20, consultez la section Définir des valeurs par défaut pour les arguments de fonction.

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) prend la valeur 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 pas exécuter de code dans cette session de console tant que la fonction n'aura pas été renvoyée. Si cela prend trop de temps, vous pouvez utiliser le gestionnaire de tâches pour annuler le calcul fastidieux. Toutefois, cela entraînera également l'échec de la page actuelle et toutes les données que vous avez saisies seront perdues.

Étapes suivantes

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

Les outils de développement vous permettent de mettre en pause un script pendant son exécution. Lorsque vous êtes en pause, vous pouvez utiliser la console pour afficher et modifier le window ou le DOM de la page à ce moment-là. Cela permet d'obtenir un workflow de débogage efficace. Consultez Premiers pas avec le débogage JavaScript pour un tutoriel interactif.

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

En outre, 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 est inspirée de jQuery, mais il ne s'agit pas en réalité de jQuery. Il s'agit simplement d'un alias de document.querySelector().
• debug(function) définit 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.