Les outils de développement - La carte du trésor du pharaon

La page ne ressemble pas à ce que tu avais prévu : le titre est trop grand, une image ne s'affiche pas et un bouton ne réagit pas. Tu peux deviner, modifier le code à l'aveugle et actualiser la page pour la dixième fois - ou bien regarder à l'intérieur. Imagine que tu es architecte dans l'Égypte antique. Devant toi se trouve le plan d'une pyramide - mais tu n'as aucun outil pour vérifier si la construction est stable. C'est exactement à cela que ressemble le travail d'un programmeur sans outils de développement ! Chrome DevTools, c'est ta « trousse de scribe » - elle te permet de regarder sous la surface de n'importe quelle page web.

Ce que tu vas apprendre

Dans ce module, tu vas compléter ton atelier de bâtisseur de pages web. Tu apprendras à :

• lire la carte des hiéroglyphes de la page dans le panneau Elements et la modifier en direct,
• tenir conseil avec le navigateur dans la console et suivre les routes des caravanes dans le panneau Network,
• demander à l'oracle Lighthouse de juger ta page,
• écrire plus vite grâce à Emmet et vérifier ton code avec un validateur,
• préparer l'icône de la page et son aperçu sur les réseaux sociaux,
• accélérer le chargement des images et des polices, et pour finir publier ta page sur internet.

Que sont les Chrome DevTools ?

Les Chrome DevTools (Developer Tools, les outils de développement) sont un ensemble d'outils intégrés au navigateur Google Chrome. Tu peux les ouvrir de plusieurs façons :

• F12 - le raccourci clavier le plus rapide
• Ctrl + Maj + I (Windows/Linux) ou Cmd + Option + I (Mac)
• Clic droit sur un élément de la page -> Inspecter (Inspect)

La troisième méthode est la plus pratique quand tu travailles sur un élément précis : tu fais un clic droit, un menu contextuel apparaît, tu choisis « Inspecter », et les DevTools s'ouvrent avec cet élément déjà sélectionné. Firefox, Edge et Safari proposent des outils semblables, mais dans ce cours nous utilisons Chrome.

Le panneau Elements - « La carte des hiéroglyphes »

Le panneau Elements est comme une carte des hiéroglyphes sur le mur d'une pyramide - il montre toute la structure HTML de la page. Ici, tu peux :

• Voir chaque élément HTML de la page
• Modifier le texte, les attributs et les styles en temps réel
• Supprimer ou ajouter des éléments temporairement
• Inspecter les styles CSS associés

Le contenu du panneau est un arbre de balises dont tu peux replier et déplier les branches. Pour une page simple, il ressemble à ceci :

1<!-- Dans le panneau Elements, tu verras toute la structure : -->
2<html>
3  <head>
4    <title>Ma page</title>
5  </head>
6  <body>
7    <h1>Bienvenue dans la pyramide !</h1>
8    <p class="description">Description de l'exposition</p>
9  </body>
10</html>

C'est l'état actuel de la page, et non le fichier lui-même : si un script a modifié quelque chose, tu vois déjà ici la nouvelle version. Clique sur n'importe quel élément, et à droite, dans l'onglet Styles, tu verras ses styles CSS - tu peux les modifier en direct ! Un double clic sur un texte ou sur un attribut permet de le changer, et la touche Suppr efface l'élément sélectionné.

N'oublie pas cependant que toutes les modifications disparaissent quand tu actualises la page. Les DevTools sont un carnet d'esquisses, pas ton fichier - reporte une idée aboutie dans ton éditeur de code.

L'onglet Console - « La salle du conseil du pharaon »

La console est un endroit où tu peux dialoguer avec le navigateur. Tapes-y document.title et appuie sur Entrée : le navigateur te répondra par le titre de la page, tiré de l'élément <title>. Le code de la page peut aussi écrire lui-même dans la console - ces trois instructions affichent trois sortes de messages :

1<!-- Exemples d'utilisation de la console -->
2<script>
3  // Afficher un message
4  console.log("Bienvenue, pharaon !");
5
6  // Afficher un avertissement
7  console.warn("Attention ! Attribut alt manquant sur une image.");
8
9  // Afficher une erreur
10  console.error("Erreur : fichier style.css introuvable");
11</script>

console.log() affiche une information ordinaire, console.warn() un avertissement sur fond jaune, et console.error() une erreur sur fond rouge. Tu apprendras JavaScript en profondeur dans le monde Mission spatiale - pour l'instant, il te suffit de savoir où chercher les messages.

La console affiche aussi les erreurs et les avertissements JavaScript - c'est comme un gardien qui t'informe des problèmes sur la page. Quand il manque un fichier d'image ou une feuille de style, tu verras également ici un message rouge avec le code 404.

L'onglet Network - « Les routes des caravanes »

Le panneau Network montre toutes les ressources chargées par la page - comme une carte des routes commerciales en Égypte. Ici, tu verras :

• Les fichiers HTML, CSS, JS - les ressources principales de la page
• Les images - graphiques et icônes
• Les polices - les polices chargées
• Le temps de chargement - combien de temps met chaque ressource à se télécharger
• Le statut HTTP - si la ressource s'est chargée correctement (200 = OK, 404 = introuvable)

Le panneau n'enregistre le trafic que lorsque les DevTools sont ouverts, alors une fois dans l'onglet Network, actualise la page (F5). Les filtres en haut, par exemple CSS, Img ou Font, réduisent la liste au type de fichier choisi, et une ligne rouge avec le statut 404 vient le plus souvent d'une faute de frappe dans le chemin d'un fichier.

Lighthouse - « L'oracle qui juge »

Lighthouse est un outil d'audit de page. Il évalue ta page dans quatre catégories :

• Performance - vitesse de chargement (0-100 points)
• Accessibility - accessibilité pour les personnes en situation de handicap
• Best Practices - bonnes pratiques de programmation
• SEO - optimisation pour les moteurs de recherche

Pour lancer Lighthouse : DevTools -> onglet Lighthouse -> clique sur Analyze page load.

En plus des scores de 0 à 100, tu obtiendras une liste de problèmes précis, avec des indications pour les corriger. Mieux vaut lancer l'audit dans une fenêtre de navigation privée, car les extensions du navigateur peuvent fausser le score de performance. Tu te serviras encore de Lighthouse dans la leçon sur les performances, et le panneau Network te sera utile quand tu accéléreras le chargement des polices et des images.

Mon conseil : garde les DevTools ouverts chaque fois que tu construis une page - F12 deviendra vite la touche sur laquelle tu appuies le plus souvent.

Pratique

Ouvre les DevTools sur la page de l'éditeur ci-dessous, inspecte le titre et tape document.title dans la console :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Chrome DevTools - Pratique</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Chrome Developer Tools</h1>
11
12    <section class="panel">
13        <h2>Panneau Elements</h2>
14        <p>Fais un clic droit sur ce texte
15           et sélectionne <strong>« Inspecter »</strong>.</p>
16        <p>Tu verras la structure HTML de cette page.</p>
17        <div class="box" id="demo-box">
18            Essaie de changer ma couleur dans les DevTools !
19        </div>
20    </section>
21
22    <section class="panel">
23        <h2>Console</h2>
24        <p>Ouvre les DevTools (F12), va dans l'onglet Console
25           et tape les commandes suivantes :</p>
26        <ul>
27            <li><code>document.title</code> - affiche le titre de la page</li>
28            <li><code>document.querySelector('h1').textContent</code> - le texte du titre</li>
29            <li><code>document.getElementById('demo-box').style.background = 'gold'</code></li>
30        </ul>
31    </section>
32
33    <section class="panel">
34        <h2>Onglet Network</h2>
35        <p>Ouvre l'onglet Network dans les DevTools, puis
36           actualise la page (F5). Tu verras tous les fichiers chargés.</p>
37        <img src="https://placehold.co/400x200/d4af37/1a1a2e?text=Pyramid+in+Giza"
38             alt="Pyramide à Gizeh" width="400" height="200">
39    </section>
40
41    <section class="panel">
42        <h2>Lighthouse</h2>
43        <p>Va dans l'onglet Lighthouse et lance un audit.
44           Vérifie les résultats dans les catégories :</p>
45        <ul>
46            <li>Performance</li>
47            <li>Accessibility</li>
48            <li>Best Practices</li>
49            <li>SEO</li>
50        </ul>
51    </section>
52</body>
53</html>

Souviens-toi : les DevTools sont la carte du trésor du pharaon - avant de creuser à l'aveugle, regarde ce qui se cache vraiment sous la surface de la page.