Heiphaistos TutorialsHeiphaistosTutorials
🪟Windows🖥️CMD / PowerShell💬Discord🍎macOS🔐Sécurité🐧Linux🌐Réseau💻Programmation🤖Android📦Applications🔥Applications Heiphaistos📦Logiciels📦HeiApps

⚒ Heiphaistos Tutorials

Forge ton savoir informatique.
Tutoriels clairs, sans blabla.

Navigation

  • Accueil
  • Tous les tutoriels
  • Windows
  • Discord

Ressources

  • Flux RSS
  • heiphaistos.org

© 2026 Heiphaistos Tutorials — tuto.heiphaistos.org

Mentions légalesConfidentialitéCGU

Forge ton savoir.

Accueil/Programmation/Les outils de développement du navigateur (F12) expliqués
💻ProgrammationVidéo

Les outils de développement du navigateur (F12) expliqués

Utiliser les DevTools de Chrome, Edge ou Firefox : inspecter et modifier le HTML et le CSS, lire la console, analyser le réseau (requêtes, codes, temps), le stockage, et simuler un mobile.

9 octobre 20261 min de lecture
#navigateur#programmation#devtools#débogage
Votre navigateur ne supporte pas la lecture vidéo.
VitesseSous-titres : bouton CC du lecteur

Sommaire

  • Onglets principaux
  • Raccourcis

Onglets principaux

  • Éléments / Inspecteur : HTML, CSS (modifiable en direct), Calculé, badges flex/grid.
  • Console : erreurs, console.log, exécuter du JavaScript. Ne collez jamais de code qu'un inconnu vous demande d'exécuter (vol de compte).
  • Réseau : requêtes, codes HTTP, en-têtes, réponse JSON, temps ; « Désactiver le cache », limitation de débit.
  • Sources : points d'arrêt JavaScript.
  • Application / Stockage : cookies, localStorage, cache.
  • Lighthouse : performance, accessibilité, SEO.

Raccourcis

F12, Ctrl + Maj + C (sélecteur d'élément), Ctrl + Maj + M (mobile), Ctrl + Maj + P (commandes, ex. « capture d'écran pleine page »).

Voir aussi lire un message d'erreur, codes HTTP.

Commentaires

Aucun commentaire pour l'instant. Soyez le premier !

Laisser un commentaire

En envoyant un commentaire, vous acceptez les conditions d'utilisation et la publication de votre pseudo après modération (voir la politique de confidentialité).