Présentation de la console

Cette page explique comment la console des outils pour les développeurs Chrome facilite le développement de pages Web. La console a deux usages principaux: afficher les messages journalisés et exécuter JavaScript.

Afficher les messages consignés

Les développeurs Web enregistrent souvent des messages dans la console afin de s'assurer que leur code JavaScript fonctionne comme comme prévu. Pour consigner un message, insérez une expression telle que console.log('Hello, Console!') dans votre JavaScript. Lorsque le navigateur exécute votre code JavaScript et voit une expression de ce type, il sait qu'il est censé consigner le message dans la console. Par exemple, supposons que vous vous trouviez 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 le délai de trois secondes. Essayez de déterminer quelles lignes de code ont amené le navigateur à enregistrer les messages.

Panneau de la console

Figure 1 : Panneau de la console

Les développeurs Web enregistrent des messages pour deux raisons générales:

  • S'assurer 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 Console Documentation de référence de l'API pour parcourir la liste complète des méthodes console. La principale différence entre les est la façon dont elles affichent les données que vous consignez.

Exécution de JavaScript

La console est également une REPL. Vous pouvez exécuter JavaScript dans la console pour interagir avec la page que vous inspectez. Par exemple, la figure 2 présente la console à côté de la page d'accueil des outils de développement, et la Figure 3 affiche la même page une fois son titre modifié à l'aide de la console.

Panneau de la console à côté de la page d&#39;accueil des outils de développement

Figure 2 : Panneau de la console à côté de la page d'accueil des outils de développement

Utiliser la console pour modifier le titre de la page

Figure 3. Utiliser la console pour modifier le titre de la page

Il est possible de modifier la page à partir de la console, car celle-ci dispose d'un accès complet aux window Les outils de développement disposent de quelques fonctions pratiques qui facilitent l'inspection d'une page. Pour Par exemple, supposons que votre code JavaScript contienne une fonction appelée hideModal. En cours d'exécution 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 essayer un nouveau code sans rapport avec la page. Par exemple, supposons que vous venez de découvrir les fonctionnalités méthode JavaScript Array map(), que vous souhaitez tester. La console est une bonne 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.