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.
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.
Notez le texte du 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.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 dedocument.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.
- Saisissez
5 + 15
dans la console. Le résultat20
apparaîtra sous votre expression (sauf si l'évaluation de l'expression 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 à quoi doit ressembler votre console 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 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.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 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 dedocument.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.