Utilisez la console pour tester et déboguer des applications Web JavaScript.
Présentation
Cette page explique comment la console des outils pour les développeurs Chrome 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 la section Ouvrir la console dans notre documentation de référence sur les fonctionnalités.
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, 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 soyez dans le processus d'écriture du code HTML et JavaScript pour 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 d'identifier les lignes de code qui ont entraîné la journalisation des messages par le navigateur.
Figure 1 : Le 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 certain moment dans le temps.
Consultez Premiers pas avec les messages de journalisation pour vous familiariser avec 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 une 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é le titre de la page à l'aide de la console.
Figure 2 : Panneau Console à côté de la page d'accueil des outils de développement.
Figure 3. Utilisez la console pour modifier le titre de la page.
La modification de la page depuis la console est possible, car la console 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 contienne une fonction appelée hideModal. L'exécution de debug(hideModal) met en veille votre code sur la première ligne de hideModal lors de son prochain 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 l'endroit idéal pour tester la fonction.
Consultez la page Premiers pas avec l'exécution de JavaScript pour vous familiariser avec l'exécution de JavaScript dans la console.