0Pricing
Frontend Academy · Leçon

Outils de développement : ouvrir et utiliser DevTools

Ouvrez Chrome DevTools, inspectez les éléments, lisez la console, observez les requêtes réseau et modifiez le CSS directement dans le navigateur.

Outils de développement : ouvrir et utiliser DevTools est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Que sont les DevTools du navigateur ?

Chaque navigateur moderne est fourni avec un ensemble intégré d’outils de développement. DevTools vous permet d’inspecter HTML et CSS, de déboguer JavaScript, d’analyser les performances, de surveiller les requêtes réseau et bien plus encore, sans quitter le navigateur.

Ouvrir DevTools

Ouvrez DevTools avec F12 (Windows/Linux) ou Cmd+Option+I (Mac). Vous pouvez également cliquer avec le bouton droit sur un élément et choisir Inspecter. Le raccourci Ctrl+Shift+J / Cmd+Option+J ouvre directement la Console.

Le panneau Éléments

Le panneau Éléments affiche l’arbre DOM en temps réel. Cliquez sur un élément pour le sélectionner et voir ses styles calculés dans le panneau Styles. Vous pouvez double-cliquer pour modifier HTML ou les valeurs CSS en temps réel : les changements sont instantanés, mais ne sont pas enregistrés dans votre fichier.

Modifier CSS en temps réel

Dans le panneau Styles, cliquez sur la valeur d’une propriété pour la modifier. Ajoutez de nouvelles règles avec le bouton +. Utilisez les cases à cocher pour désactiver des règles. C’est le moyen le plus rapide de prototyper CSS sans basculer vers votre éditeur.

Le panneau Console

La Console affiche les messages enregistrés, les avertissements et les erreurs. Vous pouvez également saisir directement du JavaScript et l’exécuter. Utilisez console.log(), console.warn(), console.error() et console.table() pour afficher des données pendant le débogage.

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

Le panneau Réseau

Le panneau Réseau affiche chaque requête HTTP effectuée par la page. Sélectionnez une requête pour voir ses en-têtes, prévisualiser le corps de la réponse et examiner la cascade des temps. Filtrez par type : XHR/récupération, JS, CSS, images, polices.

Lire le temps d’une requête

Chaque requête affiche : En attente, Recherche DNS, Connexion initiale, SSL, Requête envoyée, En attente (TTFB) et Téléchargement du contenu. TTFB (temps jusqu’au premier octet) reflète le temps de réponse du serveur.

Limiter le réseau

Utilisez le menu déroulant de limitation du panneau Réseau pour simuler une connexion 3G lente ou des conditions hors ligne. Cela révèle des problèmes de performance invisibles avec une connexion haut débit et vous aide à créer des expériences adaptées aux utilisateurs disposant de connexions médiocres.

Mode Appareil

Cliquez sur l’icône de l’appareil (Ctrl+Shift+M / Cmd+Shift+M) pour accéder au Mode Appareil. Simulez des fenêtres d’affichage mobiles, le DPR, les événements tactiles et les conditions réseau. Choisissez un préréglage comme iPhone 14 ou définissez une largeur personnalisée.

Le panneau Sources

Le panneau Sources vous permet de lire vos fichiers JavaScript et d’y définir des points d’arrêt. Un point d’arrêt suspend l’exécution afin que vous puissiez examiner les valeurs des variables et la pile d’appels, puis parcourir le code ligne par ligne avec F10 (passer par-dessus) et F11 (entrer dans).

Points d’arrêt et débogueur

Ajoutez un point d’arrêt en cliquant sur un numéro de ligne dans Sources. Lorsque l’exécution s’interrompt, survolez les variables pour voir leur valeur ou saisissez-les dans la Console. Utilisez le volet pile d’appels pour voir quelles fonctions ont mené jusqu’à ce point.

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

Vérification rapide

Quel panneau de DevTools affiche toutes les requêtes HTTP effectuées par la page, notamment leurs codes d’état et leurs temps de réponse ?

Récapitulatif : votre boîte à outils DevTools

Éléments : inspecter et modifier le DOM en direct. Console : utiliser log et exécuter JavaScript. Réseau : surveiller le trafic HTTP. Sources : définir des points d’arrêt et déboguer. Mode Appareil : tester les mises en page adaptatives. La maîtrise de ces quatre panneaux transformera votre méthode de débogage.

Questions Fréquemment Posées

La leçon « Outils de développement : ouvrir et utiliser DevTools » est-elle gratuite ?

Oui — le texte complet de « Outils de développement : ouvrir et utiliser DevTools » 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 « Outils de développement : ouvrir et utiliser DevTools » ?

Ouvrez Chrome DevTools, inspectez les éléments, lisez la console, observez les requêtes réseau et modifiez le CSS directement dans le navigateur. 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 4 sur 4.

Combien de temps prend la leçon « Outils de développement : ouvrir et utiliser DevTools » ?

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

  1. DNS et HTTP dans les navigateurs : cycle de vie d’une requête
  2. HTML, CSS et JavaScript : rôle de chaque couche
  3. Rendu d’une page : analyse, DOM, CSSOM, mise en page et peinture
  4. Outils de développement : ouvrir et utiliser DevTools
← Retour à Frontend Academy