Utilisez la console pour tester et déboguer des applications Web JavaScript.
Présentation
Cette page explique comment la console de Chrome DevTools facilite le développement de pages Web. La console a deux utilisations principales: afficher les messages consignés et exécuter JavaScript.
Ouvrir la console
Vous pouvez ouvrir la console sous forme de panneau ou d'onglet dans le panneau latéral. Pour savoir comment procéder, consultez Ouvrir la console dans notre documentation de référence.
Afficher les messages consignés
Les développeurs Web enregistrent souvent des messages dans la console pour s'assurer que leur code JavaScript fonctionne comme prévu. Pour consigner un message, vous insérez une expression telle que console.log('Hello, Console!') dans votre code JavaScript. Lorsque le navigateur exécute votre code JavaScript et voit une expression comme celle-ci, il sait qu'il doit consigner le message dans la console. Par exemple, supposons que vous rédigiez le code HTML et JavaScript d'une page:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
La figure 1 montre à quoi ressemble la console après le chargement de la page et un délai de trois secondes. Essayez de déterminer quelles lignes de code ont entraîné la journalisation des messages par le navigateur.
Figure 1 : Panneau Console.
Les développeurs Web journalisent des messages pour deux raisons principales:
- Assurez-vous que le code s'exécute dans le bon ordre.
- Inspecter les valeurs des variables à un moment donné
Consultez Premiers pas avec la journalisation des messages pour découvrir comment utiliser la journalisation. Consultez la documentation de référence sur l'API Console pour parcourir la liste complète des méthodes console. La principale différence entre les méthodes réside dans la façon dont elles affichent les données que vous consignez.
Exécuter du code JavaScript
La console est également un REPL. Vous pouvez exécuter du code JavaScript dans la console pour interagir avec la page que vous inspectez. Par exemple, la figure 2 montre la console à côté de la page d'accueil de DevTools, et la figure 3 montre la même page après avoir modifié son titre à l'aide de la console.
Figure 2 : Panneau Console à côté de la page d'accueil des outils de développement.
Figure 3. Utiliser la console pour modifier le titre de la page.
Vous pouvez modifier la page depuis la console, car elle a un accès complet à la window de la page. Les outils de développement disposent de quelques fonctions pratiques qui facilitent l'inspection d'une page. Par exemple, supposons que votre code JavaScript contient une fonction appelée hideModal. L'exécution de debug(hideModal) met en pause votre code sur la première ligne de hideModal la prochaine fois qu'il est appelé.
Consultez la documentation de référence de l'API Console Utilities pour obtenir la liste complète des fonctions utilitaires.
Lorsque vous exécutez JavaScript, vous n'avez pas besoin d'interagir avec la page. Vous pouvez utiliser la console pour tester un nouveau code qui n'est pas lié à la page. Par exemple, supposons que vous venez de découvrir la méthode d'array JavaScript intégrée map() et que vous souhaitez l'essayer. La console est un bon endroit pour tester la fonction.
Consultez Premiers pas avec l'exécution de JavaScript pour découvrir comment exécuter du code JavaScript dans la console.