• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/03/2022

Testez votre code avec les devtools Chrome et Firefox

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, vous allez utiliser les outils développeur, ou devtools, de Chrome et Firefox, pour analyser une page du site d'OpenClassrooms !

Découvrez l’inspecteur – HTML

À partir d'une page web d'OpenClassrooms, découvrez à quoi ressemble l'inspecteur HTML sur votre navigateur web.

Pour commencer, ouvrez https://openclassrooms.com/fr/paths dans Chrome :

Open Classrooms - Parcours
OpenClassrooms – Parcours

Pour inspecter la structure de cette page, vous allez ouvrir l'inspecteur d'éléments. Sur Windows, faites  Ctrl+Maj+C  . Sur macOS, faites  Option+Cmd+C  . L'inspecteur s'ouvrira en bas de votre écran.

Pour la lisibilité, je préfère ancrer les devtools à droite de mon écran. Pour changer l'ancrage des devtools, l'option se trouve dans le menu de customisation :

Customisation des Devtools
Personnalisation des devtools
Devtools à droite
Devtools à droite

Lorsque vous passez votre souris sur différentes lignes de code, les différents éléments sont surlignés sur la page affichée. Par exemple, survolez la ligne suivante :

<div id="oc-header" data-widget="header">...</div>

L'en-tête de la page sera surligné :

En-tête surlignée
En-tête surligné

Ce surlignage nous signale que l'élément de code survolé correspond à l'en-tête de la page. Plongeons dedans en cliquant sur la flèche qui se trouve au début de la ligne de code :

Ouvrez l'en-tête
Ouvrez l'en-tête

On voit que l'élément de type  div  contient un seul enfant : un élément de type  header  . La structure de cette page fait que nous avons plusieurs éléments à un seul enfant. Ouvrons-les tous jusqu'à trouver les enfants multiples qui correspondent aux différents éléments de l'en-tête : 

Plongeons dans la structure
Plongeons dans la structure

Si vous survolez les différents enfants à ce niveau, vous voyez les différents éléments surlignés sur la page, et ainsi vous savez à quel élément visuel correspond telle ligne de code :

Le logo
Le logo surligné
Le menu surligné
Le menu surligné

Vous pouvez aussi retrouver la ligne qui correspond à un élément en faisant un clic droit sur l'élément de la page, puis sur Inspecter. Essayez sur le texte "Découvrez nos parcours diplômants" :

Clic-droit + Inspecter
Clic droit + Inspecter
Le code correspondant
Le code correspondant

Vous pouvez aussi activer l'inspection à la sélection, qui vous permet de survoler et de cliquer sur les éléments de la page pour les inspecter, depuis l'inspecteur :

L'inspection à la sélection
L'inspection à la sélection

Découvrez l’inspecteur – styles

Découvrez à présent, à quoi ressemble l'inspecteur style sur votre navigateur web.

L'inspecteur des navigateurs nous permet de visualiser et de modifier le code qui régit les styles d'une page web, c'est-à-dire l'apparence des différents éléments. Si vous avez modifié votre sélection depuis la section précédente, revenez sur l'élément "Découvrez nos parcours diplômants". Dans la partie inférieure de l'inspecteur, vous verrez la partie Styles :

Sur Chrome

Styles inspector - Chrome
L'inspecteur de style sur Chrome

Sur Firefox

Styles inspector - Firefox
L'inspecteur de style sur Firefox

Dans l'inspecteur des styles ("Styles" dans Chrome, "Règles" ou "Rules" dans Firefox), vous pouvez filtrer les styles pour trouver ce qui vous intéresse, et même en modifier la valeur.

Imaginons que vous souhaitiez modifier la couleur blanche du texte. Dans le champ de filtrage, tapez "color", et cherchez la règle  color  qui est accompagnée d'un petit carré blanc et de la valeur  rgb(255, 255, 255)  :

Sur Chrome

color - Chrome
color – Chrome

Sur Firefox

color - Firefox
color – Firefox

Si vous cliquez sur la valeur associée à  color  , vous pouvez la modifier. Tapez  red  , et vous remarquerez la modification de l'apparence de l'élément :

Texte rouge
Texte rouge

Étudiez la console

Un autre outil principal des devtools est la console. La console nous apporte des informations essentielles sur le fonctionnement de nos projets, surtout en cas de problème. Vous trouverez l'accès à la console dans l'en-tête des devtools.

Sur Chrome

Accès à la console - Chrome
Accès à la console – Chrome

Sur Firefox

Accès à la console - Firefox
Accès à la console – Firefox

En tant que développeur front-end, vous pourrez faire afficher des messages dans la console. Par exemple, les développeurs chez OpenClassrooms font apparaître un message d'avertissement pour prévenir les potentielles victimes d'attaque self-XSS, où l'attaquant convainc la victime à coller du code néfaste dans cette console.

Au moment de la création de ce cours, on constate également des avertissements liés au code source, et même une erreur !

Erreur dans la console !
Erreur dans la console !

Activez le mode mobile

Environ 50 % du trafic web aujourd'hui se déroule sur mobile, donc il vous est indispensable, en tant que développeur front-end, de vérifier l'apparence de vos projets sur différents types d'appareils. Découvrez comment gérer l'apparence mobile :

Les devtools vous permettent de simuler de manière assez fiable plusieurs appareils mobiles. Vous pouvez activer le mode mobile depuis l'en-tête des devtools :

Sur Chrome

Mode mobile - Chrome
Mode mobile – Chrome

Sur Firefox

Mode mobile - Firefox
Mode mobile – Firefox

Vous constaterez le redimensionnement de la partie active de la fenêtre de navigation, et vous remarquerez que les développeurs chez OpenClassrooms ont bien fait leur travail ! Le design fonctionne bien en vue mobile :

Responsive design
Responsive design

En mode mobile, l'en-tête du navigateur permet de choisir le type de mobile simulé, son orientation, et vous pouvez même choisir de limiter la bande passante pour simuler une mauvaise connexion !

Options mode mobile
Options mode mobile

Tous ces outils vous seront très importants dans la réalisation de vos projets front-end.

En résumé

Dans ce chapitre :

  • vous avez analysé la structure d'une page web avec l'inspecteur ;

  • vous avez trouvé et modifié les styles d'un élément ;

  • vous avez découvert la console ;

  • vous avez utilisé le mode mobile pour simuler l'utilisation d'un appareil mobile.

Félicitations ! Vous arrivez à la fin de cours. Vous avez mis en place votre environnement de développement. Vous avez installé Visual Studio CodeChrome et Firefox, et vous avez une bonne compréhension de base de leurs différentes fonctionnalités.
Vous êtes maintenant prêt à évaluer ce que vous avez appris avec le quiz que je vous ai préparé !

Bonne continuation dans le monde du développement front-end ! 😀

Exemple de certificat de réussite
Exemple de certificat de réussite