Ouvrez les outils intégrés à votre navigateur pour inspecter, tester et diagnostiquer une page.
Ouvrir cette leçon dans KodokonVotre navigateur cache un atelier complet, déjà installé, gratuit, et que la plupart des gens n'ouvriront jamais. On l'appelle les outils de développement, souvent abrégés devtools. Pour les ouvrir, appuyez sur la touche F12, ou faites un clic droit n'importe où sur une page puis choisissez « Inspecter ». Sur Mac, le raccourci est Cmd + Option + I. Un panneau s'ouvre alors sur le côté ou en bas de la fenêtre, avec plusieurs onglets.
Le premier onglet, appelé Éléments ou Inspecteur selon le navigateur, affiche le HTML de la page tel qu'il existe en ce moment dans la mémoire du navigateur. Survolez une ligne : la zone correspondante s'illumine dans la page. Double-cliquez sur un texte : vous pouvez le réécrire et voir le changement instantanément. C'est le meilleur moyen de comprendre comment une page est construite, en démontant celles des autres.
L'onglet Console est celui que vous fréquenterez le plus. Il affiche les messages d'erreur en rouge quand quelque chose se casse, et il accepte aussi des instructions que vous tapez directement, exécutées dans le contexte de la page ouverte. Essayez sur n'importe quel site : tapez une ligne, appuyez sur Entrée, observez.
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"L'onglet Réseau rend visible tout ce que vous avez appris dans les leçons précédentes. Ouvrez-le, puis rechargez la page avec F5 : chaque requête apparaît sur une ligne, avec son adresse, sa méthode, son code de statut, son poids et le temps qu'elle a mis. Une ligne en rouge signale une requête ratée. C'est ici qu'on découvre, par exemple, qu'une image ne s'affiche pas parce qu'elle renvoie un 404.