Chrome DevTools : Elements, Console, Network
Parcourez les panneaux Elements, Console et Network pour inspecter les styles, déboguer les erreurs JavaScript et surveiller les requêtes HTTP.
Chrome DevTools : Elements, Console, Network est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Ouvrir DevTools efficacement
Cliquez avec le bouton droit sur n’importe quel élément, puis choisissez Inspecter pour ouvrir DevTools avec cet élément sélectionné. F12 affiche ou masque le panneau. Cmd+Shift+C (Mac) ou Ctrl+Shift+C (Windows) active directement le mode d’inspection sans ouvrir le panneau complet.
Panneau Éléments — inspecteur du DOM
Le panneau Éléments affiche l’arborescence DOM active et analysée, et non le code source HTML brut. Il reflète les modifications apportées par JavaScript. Survolez les nœuds pour les mettre en évidence sur la page. Double-cliquez pour modifier le code HTML directement.
Panneaux Styles et Calculé
Lorsqu’un élément est sélectionné, le panneau Styles affiche toutes les règles CSS appliquées, classées par spécificité. Les règles barrées sont remplacées. Le panneau Calculé affiche les valeurs finales calculées pour chaque propriété.
Forcer l’état des éléments
Cliquez sur le bouton :hov dans le panneau Styles pour forcer un état CSS comme :hover, :focus, :active ou :visited. Inspectez les styles au survol sans devoir maintenir le curseur parfaitement immobile.
Visualiser le modèle de boîte
Le panneau Calculé affiche un schéma interactif du modèle de boîte : contenu, remplissage, bordure et marge. Survolez chaque zone pour voir sa valeur. Cliquez pour modifier directement les valeurs de marge et de remplissage.
Bases de la console — journalisation et exécution de code
La console affiche les erreurs, les avertissements et les journaux. Saisissez n’importe quelle expression JavaScript, puis appuyez sur Entrée pour l’évaluer sur la page active. Utilisez la console comme REPL interactif pour tester instantanément des extraits de code.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Méthodes de l’API de console
Au-delà de console.log : console.warn() (avertissement jaune), console.error() (rouge), console.table() (affiche un tableau ou un objet sous forme de tableau), console.group() / console.groupEnd() pour regrouper la sortie et console.time() pour mesurer la durée.
Présentation du panneau Réseau
Chaque requête HTTP (HTML, JS, CSS, images, XHR, Fetch) apparaît sous forme de ligne. Les colonnes indiquent la méthode, le statut, la taille et la durée. Cliquez sur une ligne pour voir tous les détails de la requête et de la réponse.
Filtrer les requêtes réseau
Utilisez la barre de filtre pour rechercher par URL ou filtrer par type : Tout, XHR/Fetch, JS, CSS, images, médias, polices, WS. Le filtre XHR/Fetch est particulièrement utile pour déboguer les appels d’API effectués depuis JavaScript.
Inspecter une requête et sa réponse
Sélectionnez une requête réseau pour afficher : les en-têtes (de la requête et de la réponse), l’aperçu (JSON/HTML mis en forme), la réponse (corps brut) et la durée (phases de connexion). L’onglet Payload affiche les paramètres du corps POST.
Limiter le débit — simuler des réseaux lents
Cliquez sur la liste déroulante de limitation (par défaut : aucune limitation) pour simuler une connexion 3G lente, 3G rapide ou hors ligne. La case Désactiver le cache empêche le navigateur d’utiliser les ressources mises en cache pendant les essais.
Vérification rapide
Où, dans Chrome DevTools, pouvez-vous voir toutes les règles CSS appliquées à un élément sélectionné, y compris celles qui sont remplacées ?
Récapitulatif : panneaux de Chrome DevTools
Éléments : inspecter et modifier le DOM actif et le CSS. Forcer les pseudo-états pour inspecter les styles au survol. Console : journaliser, déboguer et exécuter du JS en direct. Réseau : surveiller toutes les requêtes HTTP, inspecter les en-têtes et les réponses, et limiter le débit pour simuler des connexions lentes.
Questions Fréquemment Posées
La leçon « Chrome DevTools : Elements, Console, Network » est-elle gratuite ?
Oui — le texte complet de « Chrome DevTools : Elements, Console, Network » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Chrome DevTools : Elements, Console, Network » ?
Parcourez les panneaux Elements, Console et Network pour inspecter les styles, déboguer les erreurs JavaScript et surveiller les requêtes HTTP. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Chrome DevTools : Elements, Console, Network » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chrome DevTools : Elements, Console, Network
- VSCode : extensions, Emmet et raccourcis
- Configuration de Prettier et ESLint
- Compatibilité des navigateurs et caniuse.com