Navigateur, aperçu et DevTools
Observe ce que le navigateur charge réellement et collecte un diagnostic.
Objectifs de la leçon
- Distinguer le rôle de chaque outil
- Produire une preuve observable
- Choisir une alternative accessible
1. Choisir un mode d'aperçu
Tu peux ouvrir <code>index.html</code> directement, utiliser l'aperçu intégré de la plateforme ou démarrer un serveur local déjà disponible. Pour ce module, aucun moteur PHP, serveur de base de données ou gestionnaire de paquets n'est nécessaire.
2. Faire une boucle courte
Modifie un titre, enregistre le fichier, puis recharge la page. Si rien ne change, vérifie l'onglet ouvert, le chemin affiché et l'indicateur de fichier non enregistré. Un rechargement forcé vient seulement après ces contrôles.
3. Ouvrir les outils de développement
Les navigateurs de bureau proposent généralement Inspecter ou une touche comme <code>F12</code>; les raccourcis varient. Dans une webview ou sur mobile, utilise la console et l'inspecteur fournis par la plateforme, ou poursuis avec l'aperçu visuel si ces outils sont indisponibles.
4. Transformer une erreur en indice
Dans l'onglet Console, lis le premier message et son emplacement. Dans Réseau, un statut <code>404</code> indique une ressource absente à l'adresse demandée. Copie le message exact, le fichier et l'action qui l'a déclenché avant de modifier le code.
Vocabulaire lié
- Recharger — Demander au navigateur de relire la page.
- Console — Vue des messages et erreurs d'exécution.
- 404 — Réponse indiquant qu'une ressource est introuvable.
Validation
- J'ai produit l'artefact demandé
- J'ai observé le résultat
- Je peux expliquer une alternative