đ©âđ« CSS 2 : Inspecteur
Objectifs de cette (en)quĂȘte :
- Utiliser l'inspecteur d'un navigateur web pour la création et le débogage en CSS
Introduction
Tu as commencĂ© Ă explorer les bases d'HTML/CSS. Poursuis tes investigations et mĂšne l'enquĂȘte en apprenant Ă te servir de l'inspecteur de ton navigateur !
Inspecteur Dev Tools
L'inspecteur du navigateur est un outil absolument indispensable, permettant aux dĂ©veloppeurs web d'examiner et dâinteragir avec le document HTML, le style CSS, dĂ©bugger le Javascript, avoir des information sur les requĂȘtes HTTP effectuĂ©es par le navigateur, et tout un tas d'autres actions. Tu seras amenĂ© Ă t'en servir tout le temps, donc il est important que tu maĂźtrises les bases de ce compagnon essentiel.
Voici une blague bien connue des développeurs amateurs de memes :
Source : Me.me
Et de fait, le vocabulaire du développement web se rapproche parfois dangereusement d'un film policier, notamment du fait de l'utilisation trÚs répandue de l'inspecteur.
Commence à résoudre le mystÚre autour de cette entité merveilleuse en regardant la vidéo ci-dessous.
En complément, tu peux aussi voir cette vidéo en anglais .
Alors Chrome ou Firefox ? Et pourquoi pas Safari, Edge, Brave ou OpĂ©ra ? Peu importe, aujourd'hui ces navigateurs (user agents) intĂšgrent tous (chacun Ă sa maniĂšre) un inspecteur de code munis d'une console et des outils pour dĂ©veloppeurs. Ton choix sera donc essentiellement une affaire d'affinitĂ©s personnelles. Essaie les tous đ€!
La suite de cette quĂȘte te propose des ressources pour apprendre Ă utiliser l'inspecteur de Firefox et une vidĂ©o sur l'inspecteur de Chrome. Ă quelques dĂ©tails prĂšs (le nom des onglets ou certains raccourcis par exemple), tu retrouveras les mĂȘmes fonctionnalitĂ©s si tu utilises un autre navigateur.
Prise en main de l'inspecteur sur Firefox
Interagir avec le CSS d'une page directement dans l'inspecteur de Firefox
Interagir avec le HTML d'une page directement dans l'inspecteur de Firefox
Présentation complÚte de l'inspecteur pour les utilisateurs Chrome (Concentre toi sur les 17 premiÚres minutes).