Comment utiliser la console de développement JavaScript

Introduction

Les navigateurs modernes disposent d’outils de développement intégrés pour travailler avec JavaScript et d’autres technologies web. Ces outils comprennent la Console, similaire à une interface shell, ainsi que des outils pour inspecter le DOM, déboguer et analyser l’activité réseau.

La Console peut être utilisée pour enregistrer des informations dans le cadre du processus de développement JavaScript, ainsi que pour vous permettre d’interagir avec une page web en exécutant des expressions JavaScript dans le contexte de la page. Essentiellement, la Console vous offre la possibilité d’écrire, de gérer et de surveiller le JavaScript à la demande.

Ce tutoriel expliquera comment travailler avec la Console et JavaScript dans le contexte d’un navigateur, et fournira un aperçu des autres outils de développement intégrés que vous pouvez utiliser dans le cadre de votre processus de développement web.

Travailler avec la Console dans un navigateur

La plupart des navigateurs web modernes prenant en charge HTML et XHTML conformes aux normes vous offriront un accès à une console de développement où vous pouvez travailler avec JavaScript dans une interface similaire à un terminal. Cette section explique comment accéder à la Console dans Firefox et Chrome.

Firefox

Pour ouvrir la Console Web dans FireFox, rendez-vous dans le menu ☰ en haut à droite, à côté de la barre d’adresse.

Sélectionnez Outils de développement. Une fois cela ouvert, cliquez sur l’élément Outils de développement Web.

Une fois que vous l’avez fait, un plateau s’ouvrira en bas de votre fenêtre de navigateur:

Vous pouvez également accéder à la Console Web avec le raccourci clavier CTRL + SHIFT + K sur Linux et Windows, ou COMMAND + OPTION + K sur macOS.

Maintenant que vous avez accédé à la Console, vous pouvez commencer à travailler avec JavaScript à l’intérieur.

Chrome

Pour ouvrir la Console JavaScript dans Chrome, vous pouvez accéder au menu en haut à droite de votre fenêtre de navigateur, représenté par trois points verticaux. À partir de là, vous pouvez sélectionner Outils de développement, puis Outils du développeur.

Cela ouvrira un panneau où vous pouvez cliquer sur Console dans la barre de menu supérieure pour afficher la Console JavaScript si elle n’est pas déjà sélectionnée:

Vous pouvez également accéder à la Console JavaScript en utilisant le raccourci clavier CTRL + SHIFT + J sur Linux ou Windows, ou COMMAND + OPTION + J sur macOS, ce qui mettra immédiatement le focus sur la Console.

Maintenant que vous avez accédé à la Console, vous pouvez commencer à travailler avec du code JavaScript.

Travailler dans la Console

Dans la Console, vous pouvez taper et exécuter du code JavaScript.

Commencez par une alerte qui affiche la chaîne Bonjour, tout le monde !:

alert("Hello, World!");

Une fois que vous appuyez sur la touche ENTRÉE après votre ligne de JavaScript, une alerte s’affichera dans votre navigateur:

Remarquez que la Console affichera également le résultat de l’évaluation d’une expression, qui sera lu comme undefined lorsque l’expression ne retourne pas explicitement quelque chose.

Plutôt que d’avoir des alertes pop-up que vous devez fermer, vous pouvez travailler avec JavaScript en le journalisant dans la Console avec console.log.

Pour imprimer la chaîne Hello, World!, saisissez ce qui suit dans la Console :

console.log("Hello, World!");

Dans la console, vous recevrez la sortie suivante :

Output
Hello, World!

Vous pouvez également effectuer des opérations mathématiques dans la Console :

console.log(2 + 6);

Output
8

Vous pouvez également essayer des opérations mathématiques plus complexes :

console.log(34348.2342343403285953845 * 4310.23409128534);

Output
148048930.17230788

De plus, vous pouvez travailler sur plusieurs lignes avec des variables :

let today = new Date();
console.log("Today's date is " + today);

Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

Si vous avez besoin de modifier une commande que vous avez passée dans la Console, vous pouvez taper la touche de la flèche vers le haut (↑) de votre clavier pour récupérer la commande précédente. Cela vous permettra de modifier la commande et de l’envoyer à nouveau.

La Console JavaScript vous offre un espace pour essayer du code JavaScript en temps réel en vous permettant d’utiliser un environnement similaire à une interface de terminal.

Travailler avec un fichier HTML

Vous pouvez travailler dans le contexte d’un fichier HTML ou d’une page rendue dynamiquement dans la Console. Cela vous donne l’occasion d’expérimenter avec du code JavaScript dans le contexte de HTML, CSS et JavaScript existants.

Gardez à l’esprit que dès que vous rechargez une page après l’avoir modifiée dans la Console, elle retournera à son état antérieur à la modification du document. Assurez-vous de sauvegarder les modifications que vous souhaitez conserver ailleurs.

Prenez un document HTML, tel que le fichier index.html suivant, pour comprendre comment utiliser la Console pour le modifier. Dans votre éditeur de texte préféré, créez un fichier index.html et ajoutez les lignes HTML suivantes:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

Si vous enregistrez le fichier HTML ci-dessus et le chargez dans le navigateur de votre choix, une page vide avec le titre Date du jour sera affichée dans le navigateur.

Ouvrez la Console et commencez à travailler avec JavaScript pour modifier la page. Commencez par utiliser JavaScript pour insérer une en-tête dans le HTML.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

Vous recevrez la sortie suivante dans la Console:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

Votre page devrait ressembler à ce qui suit:

Vous pouvez modifier le style de la page, tel que la couleur de fond:

document.body.style.backgroundColor = "lightblue";

Output
"lightblue"

Ainsi que la couleur du texte sur la page:

document.body.style.color = "white";

Output
"white"

Maintenant, votre page devrait révéler quelque chose de similaire à ceci:

À partir de là, vous pouvez créer un élément paragraphe <p>:

let p = document.createElement("P");

Avec cet élément créé, vous pouvez ensuite créer un nœud de texte qui peut être ajouté au paragraphe:

let t = document.createTextNode("Paragraph text.");

Ajoutez le nœud de texte en l’ajoutant à la variable p:

p.appendChild(t);

Et enfin, ajoutez p avec son élément paragraphe <p> et le nœud de texte ajouté au document:

document.body.appendChild(p);

Une fois que vous avez terminé ces étapes, votre page HTML index.html inclura les éléments suivants:

La Console vous offre un espace pour expérimenter la modification des pages HTML, mais il est important de garder à l’esprit que vous ne modifiez pas le document HTML lui-même lorsque vous effectuez des actions dans la Console. Une fois que vous rechargez la page, elle reviendra à un document vierge.

Comprendre d’autres outils de développement

En fonction des outils de développement du navigateur que vous utilisez, vous pourrez utiliser d’autres outils pour vous aider dans votre flux de travail de développement web.

DOM — Modèle Objet de Document

Chaque fois qu’une page web est chargée, le navigateur dans lequel elle se trouve crée un Document Objet Model, ou DOM, de la page.

Le DOM est un arbre d’objets et montre les éléments HTML dans une vue hiérarchique. L’arbre DOM est disponible à visualiser dans le Inspecteur dans Firefox ou le panneau Éléments dans Chrome.

Ces outils vous permettent d’inspecter et de modifier les éléments du DOM et vous permettent également d’identifier le HTML lié à un aspect particulier d’une page. Le DOM peut vous indiquer si un extrait de texte ou une image possède un attribut ID et peut vous aider à déterminer quelle est la valeur de cet attribut.

La page que vous avez modifiée ci-dessus aurait une vue DOM similaire à celle-ci avant de recharger la page:

De plus, vous verrez les styles CSS dans un panneau latéral ou en dessous du panneau DOM, ce qui vous permettra de voir quels styles sont utilisés dans le document HTML ou via une feuille de style CSS. Par exemple, remarquez ce que comprend le style du corps de votre page d’exemple dans l’Inspecteur Firefox:

Pour éditer en direct un nœud DOM, double-cliquez sur un élément sélectionné et apportez des modifications. Par exemple, vous pouvez modifier une balise <h1> et la changer en balise <h2>.

Comme avec la Console, si vous rechargez la page, vous reviendrez à l’état d’origine enregistré du document HTML.

Réseau

L’onglet Réseau des outils de développement intégrés de votre navigateur peut surveiller et enregistrer les requêtes réseau. Cet onglet révèle les requêtes réseau effectuées par le navigateur, notamment lorsqu’il charge une page, la durée de chaque requête et fournit les détails de chacune de ces requêtes. Cela peut être utilisé pour optimiser les performances de chargement de la page et déboguer les problèmes de requêtes.

Vous pouvez utiliser l’onglet Réseau en plus de la Console JavaScript. Autrement dit, vous pouvez commencer le débogage d’une page avec la Console puis basculer vers l’onglet Réseau pour voir l’activité réseau sans recharger la page.

Pour en savoir plus sur l’utilisation de l’onglet Réseau, vous pouvez lire sur la façon de travailler avec le Moniteur Réseau de Firefox ou commencer à analyser les performances réseau avec les outils de développement de Chrome.

Conception Réactive

Lorsque les sites web sont réactifs, ils sont conçus et développés pour avoir à la fois un aspect et une fonctionnalité appropriés sur différents appareils : téléphones mobiles, tablettes, ordinateurs de bureau et ordinateurs portables. La taille de l’écran, la densité de pixels et le support tactile sont des facteurs à prendre en compte lors du développement multi-appareils. En tant que développeur web, il est important de garder à l’esprit les principes de conception réactive afin que vos sites web soient entièrement disponibles pour les utilisateurs, quel que soit l’appareil dont ils disposent.

Firefox et Chrome vous offrent tous deux des modes pour garantir que les principes de conception réactive sont pris en compte lorsque vous créez et développez des sites et des applications pour le web. Ces modes émuleront différents appareils que vous pouvez étudier et analyser dans le cadre de votre processus de développement.

En savoir plus sur le Mode Responsive Design de Firefox ou le Mode Appareil de Chrome pour apprendre comment tirer parti de ces outils afin de garantir un accès plus équitable aux technologies web.

Conclusion

Ce tutoriel a fourni un aperçu du travail avec une Console JavaScript dans les navigateurs web modernes, ainsi que des informations sur d’autres outils de développement que vous pouvez utiliser dans votre flux de travail.

Pour en savoir plus sur JavaScript, vous pouvez lire sur les types de données, ou les bibliothèques jQuery ou D3.