Résoudre des problèmes avec l'outil développeur de Chrome

Votre site web a un problème et vous voulez rapidement identifier; le problème pour le corriger ?

Vous pouvez utiliser l'outil développeur de votre navigateur, dans cet article par exemple, Chrome.

 

 

Accéder à l'outil développeur

 

Pour accéder à l'outil développeur, démarrez Chrome et naviguez dans le menu jusqu'à "Plus d'outis". Vous y trouverez l'outil développeur activable au clic. Notez aussi le raccourci, qui vous fera gagner du temps:

  • Sur Windows, Crl + Maj + i
  • Sur MAC, Cmd + Ald + i


Une fois l'outil activé, une multitude de fênêtre apparait.
Décrivons un peu cette fênetre ...

 

Les différentes fonctions de l'outil

 

Au clic, la fenêtre suivante apparait :

 

 

Le premier cadre vous permet de sélectionner les fonctions de l'outils désirées.

 

  • Elements : Affiche le code source de la page HTML. On y trouvera donc les différentes classes utilisées. Un clic sur un élément, inspecté par le pointeur en bord haut-gauche du cadre, afiche le style CSS de l'élement dans le cadre 2 et le localise dans le code HTML.
  • Console: Affiche le log des différentes requêtes en provenance des scripts. Les messages d'erreur sont en particulier affichés en rouge.
  • D'autres fonctions que nous ne détaillerons pas : Sources, Network, Timeline, Profile, Ressources, Security, Audits

Le deuxième cadre n'est utilisé que pour la fonction "Elements" et affiche le code CSS appliqué à l'élement sélectionné. Le layout de l'élément est également représenté et permet de rapidement savoir les valeurs de la marge, de la bordure et du padding du bloc sélectionné.

 

Fonctionnalité très intéressante, l'édition du code css affiché est pris en compte en temps réel par le navigateur. Les changements s'affichent en temps réelle dans un cadre où est toujours affiché la page : le troisième cadre. Dans le cadre du développmeent front-end, cette fonctionnalité permet de tester rapidement les bons styles à appliquer pour afficher une page avec la représentatiion voulue.

 

Les problèmes que vous pouvez corriger

 

L'outil développeur porte bien son nom : avec cet outil, vous pouvez à la fois développer le code HTML et CSS, et vérifier la bonne exécution de vos scripts. Il sera utile à la fois aux développeurs front-end et back-end.

 

Un développeur front-end appréciera en particulier la fonction "Inspecter un élément" pour régler un problème d'affichage : un élément inspecté a sa position dans le code HTML et la feuille de style identifié, il est donc facile de le retrouver pour le modifier.

 

 

 

Un développeur back-end, lui, appréciera la console pour découvrir les messages d'erreur liés à l'exécution de la page. Il connaitra aussi facilement la pléiade de données chargées sur la page vers la fonctionnalité "Network".

 

 

C'est tout pour cet article ! Merci de votre lecture !