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

Ouvrir la leçon interactive