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.
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.
Notez le texte dans le bouton ci-dessous.
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 dedocument.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.
- Saisissez
5 + 15
dans la console. Le résultat20
apparaîtra sous l'expression (sauf si son évaluation prend trop de temps). - 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. 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
.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 valeur45
, car lorsque la fonctionadd
est appelée sans deuxième argument,b
est défini par défaut sur20
.
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 pourdocument.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.