Exécuter JavaScript dans la console

Ce tutoriel interactif vous explique comment exécuter JavaScript dans la console des outils pour les développeurs Chrome. Pour savoir comment consigner des messages dans la console, consultez la section Premiers pas avec Logging Messages. Consultez la section Premiers pas avec le débogage JavaScript pour découvrir comment suspendre le code JavaScript et le parcourir ligne par ligne.

Figure 1 : La console

Présentation

La console est une REPL, qui signifie "lecture", "évaluation", "impression" et "boucle". Il 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 version de démonstration et essayer tous les workflows par vous-même. Lorsque vous suivez physiquement les workflows, 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, juste ici, sur cette page.

   

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

Afficher et modifier le code JavaScript ou DOM d'une 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 l'apparence ou l'exécution de la page.

1. Notez le texte dans le 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.

   

   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 de la REPL: lecture, évaluation, impression et boucle. Après avoir évalué votre code, une REPL imprime le résultat de l'expression. Ainsi, "Hello, Console!" doit être le résultat de l'évaluation de document.getElementById('hello').textContent = 'Hello, Console!'.

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

Parfois, vous avez juste besoin d'un terrain de jeu 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 de tests.

1. Saisissez 5 + 15 dans la console. Le résultat 20 apparaîtra sous l'expression (sauf si son évaluation 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 comment votre console doit se présenter 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;
   }
   

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

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 exécuter aucun code dans cette session de console tant que votre 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 chronophage. Toutefois, la page actuelle échouera également et toutes les données 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 suspendre un script en cours d'exécution. Pendant la suspension, vous pouvez utiliser la console pour afficher et modifier la valeur window ou DOM de la page à tout moment. Le workflow de débogage est ainsi plus efficace. Reportez-vous à la section Premiers pas avec le débogage JavaScript pour accéder à un tutoriel interactif.

La console accepte également un ensemble de spécificateurs de format. Pour découvrir toutes les méthodes de mise en forme et de style des messages de la console, consultez Mettre en forme et personnaliser le style des messages dans la console.

En outre, la console dispose également d'un ensemble de fonctions pratiques qui facilitent les interactions 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 réellement de jQuery. C'est juste un alias pour document.querySelector().
• debug(function) définit efficacement 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 Utilitaires pour découvrir toutes les fonctions pratiques.