Ce tutoriel interactif vous montre comment exécuter JavaScript dans la console Outils pour les développeurs Chrome. Voir Premiers pas avec la journalisation des messages pour apprendre à consigner les messages dans la console. Consultez la section Premiers pas dans Debugging JavaScript, pour découvrir comment mettre en veille le code JavaScript et le parcourir une ligne à l'adresse à la fois.
Figure 1 : La console
Présentation
La console est une REPL, qui signifie Lecture, Évaluation, Impression et Boucle. Il lit la le code JavaScript que vous y entrez, é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. Quand ? vous suivez physiquement, vous êtes plus susceptible de vous souvenir des flux de travail 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 à 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 afin de pour modifier l'apparence ou l'exécution de la page.
Notez le texte du bouton ci-dessous.
Saisissez
document.getElementById('hello').textContent = 'Hello, Console!'
dans Console, puis puis appuyez sur Entrée pour évaluer l'expression. Notez que le texte à l'intérieur du bouton change.Figure 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, évaluer, imprimer, boucler. 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'évaluationdocument.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 nouveaux des fonctionnalités 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 votre 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 comment votre console doit après avoir évalué cette expression. Saisissez le code suivant dans la console. Essayez de le saisir, caractère par caractère, plutôt que par copier-coller.
function add(a, b=20) { return a + b; }
Si vous ne connaissez pas la fonction
b=20
, consultez la section Définir des valeurs par défaut pour les arguments de fonction. syntaxe.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, La valeur par défaut deb
est20
.
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 qui prend beaucoup de temps. Toutefois, cela entraînera également l'échec de la page actuelle 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 mettre en pause un script pendant son exécution. Lorsque vous êtes en pause, vous pouvez utiliser
la console pour afficher et modifier à ce moment le paramètre window
ou DOM
de la page. Ainsi,
pour un workflow de débogage efficace. Consultez Premiers pas avec le débogage JavaScript pour une session interactive
tutoriel.
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$()
. Ce s'inspire de jQuery, mais ce n'est pas en fait jQuery. Il s'agit simplement d'un alias pourdocument.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.