# Developer Tools

Les Developer Tools sont des outils dans chaque navigateur qui vous permettent de diagnostiquer des sites web aisément. Vous pouvez trouver les bugs facilement et tester votre site avant de le rendre accessible à tous.

# Start Developer Tools

Dans Chrome, vous pouvez lancer les outils de développement avec ⌘COMMAND + ⌥OPTION + I (macOS) ou F12 (Windows). Un clic droit + “Inspecter” lancera également les outils de développement.

# Structure des outils de développement

La barre supérieure montre les différentes sections des outils de développement. Celles-ci peuvent faire beaucoup, mais nous nous concentrerons sur les fonctionnalités principales.

Lorsque les outils de développement sont affichés, vous pouvez déterminer où la fenêtre contenant ces outils doit être affichée en cliquant sur l’icône comportant les trois points verticaux dans le coin supérieur droit.

# Inspecter l’élément

En sélectionnant l’icône en forme de flèche en haut à gauche, vous pouvez examiner différents éléments de votre site. Cela vous indiquera la position dans le document HTML, ainsi que les règles CSS qui s’appliquent à cet élément.

En bas des outils de développement, il y a une autre barre d’onglet. Dans l’onglet “Styles”, vous pouvez voir les règles CSS actuellement en vigueur pour cet élément HTML. Dans ce cas, nous voyons que la classe CSS suivante s’applique et définit l’apparence :

    .onboarding-ed__arrow-teaser .onboarding-ed__arrow-teaser__alpinist {
      height: 64px;
      width: 80px;
      opacity: 0.85;
      transition: opacity .25s ease;
    }

# Modifier le CSS en local

L’une des forces des outils de développement est que vous pouvez modifier les CSS directement dans le navigateur. Il est parfois fastidieux de toujours passer de l’éditeur de code au navigateur. Vous pouvez donc essayer des styles dans le navigateur et les transférer ensuite à votre éditeur de code. Ecrivez vos propres règles CSS dans l’onglet “Styles” et vous pourrez en voir directement les effets.

# Mode Responsive

En sélectionnant l’icône en haut à gauche, qui ressemble à un petit et grand écran se chevauchant, vous pouvez lancer le mode réactif dans les outils de développement. Sur le côté gauche de l’écran, où il est indiqué “iPhone 6/7/8”, vous pouvez maintenant sélectionner une taille d’écran prédéfinie. Si vous sélectionnez “Responsive” dans la liste déroulante, vous pouvez librement agrandir et réduire les marges de votre écran. Vous pouvez ainsi tester votre site web pour différentes tailles d’écran.

# Console

Parfois, quelque chose ne fonctionne pas sur un site web. Vous devez rechercher l’erreur. La console est comme un journal des erreurs et vous indique où une erreur peut se trouver. Vous ne verrez pas d’erreurs CSS ici. Si votre javascript vous pose des problèmes ou si le serveur ne fonctionne pas correctement, c’est ici que vous trouverez des erreurs. Vous pouvez voir s’il y a une erreur ou un avertissement pour un site grâce aux icônes colorées dans le coin supérieur droit de votre console.

Les professionnels peuvent mieux vous aider si vous leur envoyez un extrait de votre console. Pour ce projet, la Console n’est pas encore pertinente, mais à mesure que vous vous familiariserez avec le développement web, vous en aurez de plus en plus besoin.