🛠️ Les DevTools du Navigateur

Votre meilleur allié pour développer en HTML et CSS

Qu'est-ce que les DevTools ?

Les DevTools (Developer Tools) sont des outils intégrés à tous les navigateurs modernes qui permettent aux développeurs d'inspecter, de déboguer et d'optimiser leurs sites web.

C'est comme avoir des rayons X pour votre site web ! Vous pouvez voir et modifier le code en temps réel, tester des modifications sans toucher aux fichiers originaux, et comprendre comment votre page est construite.

🚀 Comment ouvrir les DevTools ?

Méthode 1 : Les raccourcis clavier (recommandé)

Windows/Linux : F12 ou Ctrl + Shift + I

Mac : Cmd + Option + I

Méthode 2 : Le menu du navigateur

  • Chrome : Menu (⋮) → Plus d'outils → Outils de développement
  • Firefox : Menu (☰) → Plus d'outils → Outils de développement web
  • Edge : Menu (⋯) → Plus d'outils → Outils de développement

Méthode 3 : Le clic droit (la plus pratique)

Clic droit sur n'importe quel élément de la page → Inspecter

Cette dernière méthode ouvre directement l'inspecteur sur l'élément sélectionné !

🔍 Les Onglets Principaux

📄 Elements (HTML)

Visualisez et modifiez le code HTML de la page en temps réel. C'est l'onglet que vous utiliserez le plus !

🎨 Styles (CSS)

Consultez et modifiez les styles CSS appliqués à chaque élément. Testez vos modifications instantanément.

📱 Device Mode

Testez votre site sur différentes tailles d'écran et appareils mobiles sans quitter votre ordinateur.

🖥️ Console

Affichez les messages d'erreur, les logs JavaScript et exécutez du code directement dans le navigateur.

🎯 L'Inspecteur d'Éléments

Comment l'utiliser ?

  1. Ouvrez les DevTools avec F12
  2. Cliquez sur l'icône de sélection d'élément (🔍) en haut à gauche
  3. Survolez les éléments de la page - ils s'illuminent !
  4. Cliquez sur un élément pour le sélectionner dans le code
Vous pouvez aussi utiliser le raccourci Ctrl + Shift + C (Windows/Linux) ou Cmd + Shift + C (Mac) pour activer directement le sélecteur.

Ce que vous voyez quand vous survolez un élément :

  • ■ Zone verte : Le contenu (content)
  • ■ Zone orange : La marge intérieure (padding)
  • ■ Zone bleue : La bordure (border)
  • ■ Zone rouge/marron : La marge extérieure (margin)
Les modifications dans les DevTools sont temporaires ! Elles disparaissent au rafraîchissement de la page. C'est parfait pour tester avant de modifier vos vrais fichiers.

🎨 Travailler avec les Styles CSS

Le panneau Styles

Dans l'onglet Elements, le panneau de droite affiche tous les styles CSS appliqués à l'élément sélectionné.

Ce que vous pouvez faire :

  1. Voir tous les styles appliqués - Classés par spécificité (les plus importants en haut)
  2. Modifier les valeurs - Double-cliquez sur une valeur pour la changer
  3. Activer/Désactiver des règles - Cochez/décochez les cases à côté des propriétés
  4. Ajouter de nouvelles propriétés - Cliquez dans un bloc CSS et tapez
  5. Voir les propriétés héritées - Descendez dans le panneau pour voir ce qui vient des parents

La section "element.style"

Tout en haut du panneau Styles, vous trouverez element.style. C'est comme un terrain de jeu : vous pouvez y ajouter n'importe quel style pour tester rapidement !

element.style { /* Ajoutez vos tests ici */ background-color: lightblue; padding: 20px; border-radius: 10px; }
Utilisez les flèches ↑ et ↓ du clavier pour incrémenter/décrémenter les valeurs numériques. Maintenez Shift pour aller plus vite (×10) !

🎨 La Color Picker (Sélecteur de Couleurs)

Quand vous cliquez sur un carré de couleur dans le panneau Styles, un sélecteur de couleur apparaît !

Fonctionnalités du Color Picker :

  • 🎨 Palette de couleurs - Sélectionnez visuellement votre couleur
  • 👁️ Pipette - Capturez n'importe quelle couleur de votre écran
  • 🔄 Formats multiples - Basculez entre HEX, RGB, HSL
  • 📋 Palette de nuances - Tons clairs et foncés de la couleur actuelle
  • ♿ Contraste - Vérifiez l'accessibilité de vos couleurs
La pipette est particulièrement utile pour capturer les couleurs d'un design existant !

📏 Le Box Model (Modèle de Boîte)

En bas du panneau Styles, vous trouverez un diagramme du modèle de boîte. C'est une représentation visuelle des dimensions de votre élément.

Structure du Box Model :

CONTENU
PADDING
BORDER
MARGIN

Vous pouvez cliquer sur chaque valeur pour la modifier directement !

Survolez les valeurs dans le Box Model - l'élément correspondant s'illumine sur la page avec la couleur appropriée !

📱 Le Mode Responsive (Device Mode)

Activation :

Cliquez sur l'icône de téléphone/tablette 📱 en haut à gauche des DevTools ou utilisez :

Ctrl + Shift + M (Windows/Linux) ou Cmd + Shift + M (Mac)

Fonctionnalités :

  • 🎯 Appareils prédéfinis - iPhone, iPad, Samsung Galaxy, etc.
  • 📐 Dimensions personnalisées - Testez n'importe quelle taille d'écran
  • 🔄 Rotation - Basculez entre portrait et paysage
  • 📶 Simuler la connexion - Testez avec une connexion lente
  • 👆 Mode tactile - Simulez les interactions tactiles
Utilisez ce mode pour tester tous vos media queries ! C'est indispensable pour le responsive design.

🖥️ La Console

À quoi sert la Console ?

  • 🐛 Voir les erreurs - Toutes les erreurs HTML/CSS/JS apparaissent ici
  • 📝 Tester du JavaScript - Exécutez du code en temps réel
  • 🔍 Déboguer - Affichez des valeurs avec console.log()
  • ⚠️ Warnings - Soyez alerté des problèmes potentiels

Exemples de commandes utiles :

// Sélectionner un élément par son sélecteur CSS document.querySelector('.ma-classe') // Voir toutes les images document.querySelectorAll('img') // Effacer la console clear() // Mesurer le temps d'exécution console.time('test') // ... votre code ... console.timeEnd('test')
Les messages en rouge sont des erreurs à corriger. Les messages en orange sont des avertissements - à surveiller mais pas forcément critiques.

🎯 Astuces et Raccourcis Pratiques

Ctrl/Cmd + F
Rechercher dans le code
Ctrl/Cmd + Z
Annuler une modification
H
Cacher un élément (dans Elements)
Échap
Ouvrir/fermer la console en bas
Ctrl/Cmd + Shift + C
Activer le sélecteur d'élément

Astuces de pro :

  1. Copier les styles - Clic droit sur un élément → Copy → Copy styles
  2. Capturer des screenshots - Ctrl/Cmd + Shift + P → "screenshot"
  3. Simuler le hover - Dans Styles, cliquez sur :hov pour forcer les états
  4. Éditer le HTML - Clic droit sur un élément → Edit as HTML
  5. Glisser-déposer - Dans Elements, vous pouvez réorganiser les éléments en les faisant glisser

🎮 Exercices Pratiques

Exercice 1 : Premier contact

Inspectez cette boîte !
  1. Ouvrez les DevTools (F12)
  2. Activez le sélecteur d'élément (icône 🔍)
  3. Cliquez sur la boîte violette ci-dessus
  4. Dans le panneau Styles, trouvez la propriété background
  5. Changez la couleur de fond en vert (#4caf50)
  6. Ajoutez une propriété : font-size: 2em;

Exercice 2 : Le Box Model

Étudiez mon box model !
  1. Inspectez la boîte ci-dessus
  2. Regardez le diagramme du Box Model en bas du panneau Styles
  3. Identifiez les valeurs de margin, border, padding et content
  4. Modifiez le padding à 50px
  5. Ajoutez une bordure : border: 5px solid red;
  6. Observez comment le Box Model se met à jour

Exercice 3 : Mode Responsive

  1. Activez le mode responsive (Ctrl/Cmd + Shift + M)
  2. Sélectionnez "iPhone 12 Pro" dans la liste
  3. Observez comment la page s'adapte
  4. Testez en mode paysage (icône de rotation)
  5. Créez une dimension personnalisée : 800x600
  6. Changez le zoom à 75% puis 125%

Exercice 4 : Chasse aux bugs CSS

Ce texte devrait être en bleu avec un fond jaune !
  1. Inspectez la boîte rouge ci-dessus
  2. Dans le panneau Styles, trouvez pourquoi elle est rouge et pas jaune
  3. Corrigez la couleur de fond à : background: yellow;
  4. Corrigez la couleur du texte à : color: blue;
  5. Une fois que c'est bon, copiez le code corrigé (Copy styles)

Exercice 5 : Exploration libre

Maintenant, à vous de jouer ! Visitez votre site web préféré et :

  1. Inspectez le logo du site
  2. Trouvez quelles polices sont utilisées
  3. Identifiez les couleurs principales du site
  4. Changez un titre en votre nom
  5. Modifiez les couleurs à votre goût
  6. Prenez un screenshot de vos modifications
Rappelez-vous : vos modifications ne sont visibles que par vous et disparaissent au rafraîchissement !

📚 Récapitulatif

Ce que vous devez retenir :

  • ✅ Les DevTools sont vos meilleurs amis pour développer
  • ✅ Ouvrez-les avec F12 ou clic droit → Inspecter
  • ✅ L'onglet Elements montre le HTML, le panneau Styles montre le CSS
  • ✅ Toutes les modifications sont temporaires - parfait pour expérimenter
  • ✅ Le mode responsive est essentiel pour tester sur mobile
  • ✅ La Console affiche les erreurs - consultez-la régulièrement
  • ✅ Le Box Model visualise les dimensions de vos éléments
  • ✅ Utilisez le Color Picker pour choisir et copier des couleurs

Prochaines étapes :

  1. Utilisez les DevTools à chaque fois que vous codez
  2. Explorez les onglets que nous n'avons pas couverts (Network, Performance, etc.)
  3. Pratiquez en inspectant différents sites web
  4. Utilisez-les pour comprendre comment les pros ont construit leurs sites

🚀 Vous êtes maintenant prêt !

Les DevTools vont devenir votre outil quotidien. Plus vous les utilisez, plus vous deviendrez efficace !

💪 N'ayez pas peur d'expérimenter - vous ne pouvez rien casser !