Utiliser les outils de développement du navigateur - Divi Community

Sur Divi Community avec Julien, nous faisons de notre mieux de partager nos connaissances sur la création de sites Internet, avec le thème Divi et par extension l’utilisation de WordPress et ses plugins. Et que ce soit via les commentaires ici-même sur le blog ou sur le groupe Facebook Support Divi Community, au fil des conseils que nous prodiguons, nous constatons bien souvent que les outils de développement du navigateur sont trop souvent méconnus – voire inconnus – des développeurs en herbe.
Pourtant, il s’agit d’un outil essentiel qui, pour ma part, reste constamment activé lorsque je travaille sur un site. De plus, quand je repère un effet ou une fonctionnalité intéressante sur un site que je visite, il me permet de comprendre comment cela a été réalisé.
Je vous propose donc un tour d’horizon des principales options que nous offrent les outils de développement du navigateur.
Je baserai mon tuto sur Chrome car c’est le navigateur que j’utilise (comme la majorité des internautes à l’heure où j’écris ces lignes d’ailleurs), mais même si quelques intitulés et fonctions diffèrent, l’outil est sensiblement le même sur FireFox, Safari ou encore Edge.

Je précise dès maintenant que toutes les modifications que vous pourriez effectuer via les outils de développement ne seront pas enregistrées sur votre site et disparaitront au premier rechargement de la page. Si vous souhaitez sauvegarder les modifications appliquées sur le fichier style.css, vous pouvez lire ce tutoriel de Grégoire Noyelle sur le sujet.

Comment afficher les outils de développement

Par le menu

Dans la barre de menu du navigateur, allez dans Afficher -> Options pour les développeurs.
3 options s’offrent à vous :

  • Code source : affiche une simple fenêtre avec le contenu HTML de la page
  • Outils de développement : c’est la partie qui va nous intéresser et que je vais vous détailler
  • Console JavaScript : affiche un onglet particulier des outils de développement concernant les infos, erreurs, fichiers… JavaScript uniquement

Avec un raccourci clavier

Sur PC, faites CTRL + MAJ + I ou Commande + MAJ + I sur Mac pour afficher les outils de développement.
Et pour afficher directement la console JavaScript, ce sera CTRL + ALT + J sur PC ou Commande + ALT + J sur Mac.

Avec un clic droit

Cette méthode ne fait pas qu’afficher les outils de développement comme les 2 précédentes que je viens de citer.
L’intérêt ici est de faire un clic droit sur un élément en particulier et de choisir Inspecter dans le menu contextuel qui s’affiche. Ainsi, les informations qui vont apparaitre concerneront directement l’élément cliqué.
Quelles sont ces informations me demanderez-vous ? Et bien c’est justement l’objet du chapitre suivant…

Une première incursion dans les outils de développement

Après avoir affiché la fenêtre des outils de développement en utilisant l’une des méthodes que je vous ai citées plus haut, vous verrez apparaitre dans la fenêtre de votre navigateur un panneau contenant des lignes de code un peu partout (c’est la première impression que ça fait…).

En voyant la capture d’écran ci-dessus, vous avez certainement du remarquer 2 choses :

  1. que mes outils de développement sont sur fond noir alors que les vôtres sont très probablement sur fond blanc si vous avez laissé les options d’affichage par défaut.
    Comme je vous le disais en introduction de cet article, passer de nombreuses heures à travailler avec cet outil à scruter toutes ces lignes de code fatigue énormément les yeux. Le fond noir offrant un confort visuel non négligeable, je vais vous expliquer comment changer l’apparence du panneau en quelques secondes :

    • en haut à droite, cliquez sur l’icone ressemblant à des points de suspension verticaux : 
      Vous pouvez également utiliser le raccourci clavier F1
    • vous venez d’afficher les paramètres des outils de développement. Vous verrez tout de suite une rubrique Appearance dans laquelle il vous suffira de choisir le thème Dark.
  2.  que mes outils de développement sont à l’horizontale alors que les vôtres sont probablement en verticale sur la droite de la fenêtre de votre navigateur.
    Pour modifier leur position, cliquez de nouveau sur l’icone  pour afficher les différents dispositions possibles : fenêtre séparée, en bas ou à droite.
    Si comme moi vous travaillez avec 2 écrans, je vous conseille d’utiliser le mode fenêtre séparée ; ainsi, pour un confort optimal, vous pourrez disposer la fenêtre de votre navigateur sur l’écran principal et la fenêtre des outils de développement sur le second écran.
    Si vous n’avez qu’un seul écran, je vous suggère de placer le panneau en bas de la fenêtre : l’organisation des informations – et donc lisibilité du contenu – sera meilleure qu’avec le panneau à droite de la fenêtre.

Bien, maintenant que j’ai refermé cette “petite” parenthèse sur les options d’affichage du panneau, je vous propose de nous intéresser aux différents onglets qui le composent.

L’onglet Elements

Par défaut, quand les outils de développement s’ouvrent, c’est l’onglet Elements qui va apparaitre.

Sa partie à gauche (ou en haut selon le type d’affichage de votre panneau)

Celle-ci affiche le code HTML de la page web en cours d’exécution, soit l’équivalent de la fenêtre Code source que j’évoquais plus tôt. À la différence près qu’il s’agit ici d’un affichage interactif ; c’est-à-dire que vous pouvez interagir avec en cliquant les lignes de code, et ce de différentes manières :

  • en cliquant sur la petite flèche située à gauche de chaque ligne vous allez pouvoir déplier et replier le contenu de l’élément.
    Par exemple, sur la capture d’écran suivante, la balise <p> est repliée et on ne voit pas son contenu, alors que la div qui suit est dépliée et laisse apparaitre son contenu :
  • en faisant un clic droit sur une ligne, plusieurs options vont s’offrir à vous :

    Je ne vais pas toutes vous les détailler, mais vous pourriez trouver utiles :

    • Edit as HTML permet d’éditer le code HTML de l’élément sélectionné
    • Hide ou Delete element masque ou supprime un élément, ce qui permet parfois de faire un peu de place dans la page afin de voir de quelle manière se comportent d’autres éléments
    • :active, :hover, :focus et :visited permettent de basculer entre les différents états d’un lien ou d’un champ de formulaire afin de voir leur rendu au survol, au clic, etc.

Sa partie à droite (ou en bas selon le type d’affichage de votre panneau)

Il s’agit de la partie la plus importante des outils de développement du navigateur pour un intégrateur web car elle gère les CSS.
Si vous cliquez sur un élément dans le code HTML, vous verrez s’afficher les CSS correspondantes dans l’onglet Styles.

Les principales options à noter dans l’onglet Styles sont celles que j’ai numérotées dans la capture d’écran ci-dessous :

  1. En cliquant sur l’icone en forme d’épingle, une liste de 4 cases à cocher s’affiche. Si par exemple vous cochez la case :hover, vous affichez également les éléments contenant la pseudo-classe :hover. De cette manière, vous pourrez modifier les styles au survol de vos liens, boutons, etc.
  2. En ajoutant des propriétés à cet endroit, vous insérerez des styles de type inline sur l’élément sélectionné dans le code HTML de votre page
  3. Ici se trouve le cœur des outils de développement :
    • vous voyez quelles balises correspondent à l’élément sélectionné dans le code HTML de votre page
    • vous pouvez ajouter et modifier les propriétés et valeurs des balises
      • commencez à saisir quelques caractères et le système d’autocomplétion vous fera des suggestions
      • quand la propriété désigne une nuance, au clic sur le petit carré de couleur un colorpicker s’affichera
  4. Il s’agit du nom de la feuille de style dans laquelle apparait la balise correspondante. Au clic sur ce nom, vous afficherez le fichier CSS correspondant dans l’onglet Sources (je vous en parle un peu plus loin en détails)
  5. Ce sont des icones de raccourcis qui permettent d’ajouter rapidement les propriétés color et background-color ou alors une nouvelle règle de style

Enfin, à droite de l’onglet Styles se trouve l’onglet Computed qui pourrait également vous être utile, car il affiche une représentation graphique de diverses propriétés de l’éléments sélectionné, concernant ses dimensions (width, height, padding, border et margin ; voire même position dans certains cas).

Les outils Select an Element et Toggle Device Mode

Voici 2 petits icones situés à gauche de l’onglet Elements et qui se remarquent à peine. Ils sont pourtant d’une grande utilité !

Cliquez sur le premier et survolez un élément de votre page : vous verrez tout d’abord apparaitre différentes informations comme sa balise, ses dimensions, les zones occupées par ses parents directs.
Et si maintenant vous cliquez sur l’élément que vous venez de survoler, celui-ci s’affichera dans le code HTML de l’onglet Elements et bien sur ses propriétés CSS s’afficheront dans l’onglet Styles.

Cliquez maintenant sur le second icone pour passer au panneau simulant l’affichage sur différentes tailles d’écrans de mobiles et tablettes.
Cliquez là où est noté le nom d’un appareil mobile pour en choisir un ou ajuster la résolution manuellement. L’icone circulaire après le pourcentage permet de changer l’orientation de l’appareil.

Si les barres de couleurs n’apparaissent pas comme sur l’image ci-dessus, cliquez sur l’icone  situé en haut à droite du panneau et choisissez Show media queries. Il s’agit d’une représentation graphique des différents points de rupture définis dans l’ensemble des feuilles de styles chargées par votre site (que ce soit celles du thème ou des plugins).
Au survol des diverses sections de ces barres de couleurs, les dimensions apparaitront : 
Vous pourrez ensuite faire un clic droit sur la section qui vous intéresse, cliquer sur Reveal in Source Code puis choisir un nom de feuille de style pour afficher celle-ci dans l’onglet Sources, et ce afin d’apporter des modifications aux media queries directement concernées.

L’onglet Console

J’ai évoqué cet onglet dans le premier chapitre, lorsque je listais les différentes méthodes pour afficher les outils de développement.
La console JavaScript est une autre fonctionnalité qui s’avère très utile du moment où on décide d’apporter des modifications un peu avancées à son site en utilisant du JavaScript (et jQuery en particulier).
Elle apporte principalement une aide au débogage du code en listant les erreurs qu’elle détecte.

Sur la capture d’écran ci-dessus, vous pouvez voir :

  • un icone rouge suivi d’un chiffre  :
    • il apparait sur tous les onglets des outils de développement, du moment où il y a au moins une erreur JavaScript
    • au clic, la console JavaScript va s’ouvrir et afficher les détails de l’erreur
  • un ligne de texte rouge correspondant au détail de l’erreur JS, avec en bout de ligne le nom du fichier dans lequel elle a été détectée.
    Si vous cliquez sur le nom du fichier, celui-ci va s’ouvrir dans l’onglet Sources, vous montrant la ligne concernée par l’erreur. Vous pourrez éditer le fichier en direct pour tenter de le débugger (mais pas le sauvegarder, comme je vous l’expliquais en début d’article).

Notez que le console JavaScript peut également servir à faire des tests de code en direct. L’exemple ci-dessous présente l’affichage d’une simple alerte, mais on peut utiliser des fonctions plus complexes :

L’onglet Sources

Ça fait déjà 2 fois que je cite rapidement cet onglet, mais il est désormais temps de rentrer dans les détails car celui-ci a également toute son importance.

En effet, c’est une sorte d’explorateur de fichiers :

  • dans la partie gauche du panneau apparait l’arborescence des dossiers wp-content et wp-includes et dedans seront listés les fichiers CSS, JS, ainsi que les images chargées par la page affichée à l’écran.
  • dans la partie de droite du panneau s’affiche le fichier sur lequel vous avez cliqué dans le panneau de gauche (ou comme je vous le disais plus haut, sur un lien présent dans les panneaux Styles ou Console).
    Vous pourrez modifier ce fichier comme si vous étiez dans un éditeur de code, avec la coloration syntaxique, l’autocomplétion, la détection des erreurs… et voir le résultat en direct sur votre page.

    Je précise une fois encore que les modifications ne seront pas enregistrées. Si par exemple vous travaillez sur le fichier style.css de votre thème enfant, vous devrez donc faire un copier/coller de vos lignes de code modifiées, de ce panneau vers votre “vrai” fichier style.css.
    Vous pouvez également faire un clic droit et choisir Save as puis écraser votre ancien fichier style.css.

Mais il faut savoir qu’une autre super fonctionnalité se cache dans cet onglet Sources, sous la forme de cet icone très discret : 
Il va vous permettre de formater votre code en un clic. Prenez par exemple le fichier style.css de Divi qui ressemble à ça :

Le code tient sur 15 longues lignes car il a été minifié. C’est-à-dire que tous les espaces et les retours à la ligne inutiles du code ont été retirés pour alléger le poids du fichier. Pas très lisible…
Et bien, vous n’avez qu’à cliquer sur  pour retrouver un formatage avec indentation, donc bien plus facile à lire :

Sachez que vous pouvez vous servir de cette fonctionnalité pour reformater n’importe quel fichier minifié.
Il vous suffit :

  • d’ouvrir le fichier dans votre navigateur
  • de l’afficher dans l’onglet Sources des outils de développement
  • de cliquer sur l’icone de formatage
  • de faire un clic droit sur vos lignes de code en choisissant Save as

L’onglet Network

Je vais clore cet article sur cet onglet qui affiche le temps et l’ordre de chargement de tous les fichiers appelés par la page en cours.
Quand vous arrivez sur cet onglet, rechargez votre page pour voir apparaitre les données.

La fonctionnalité la plus importante présente dans cet onglet est la suivante : 
Par défaut, elle ne sera pas cochée mais je vous encourage vivement à le faire car elle permet de désactiver le cache du navigateur lorsque les outils de développement sont actifs.
Ainsi, quand vous ferez des changements sur vos fichiers CSS, JS ou autres, vous n’aurez qu’à rafraichir la page sans avoir à vous soucier de vider le cache et être embêté par une persistance résiduelle qui empêcherait vos modifications de s’afficher.

Le mot de la fin

On pourrait écrire un roman sur les outils de développement du navigateur, car il s’agit réellement d’une application dans l’application, comme vous avez pu le comprendre à la lecture de cet article.
Je vous laisse découvrir par vous-même les onglets que je n’ai pas détaillés, car j’ai pris le parti de me concentrer sur les principales fonctionnalités utiles au quotidien pour la création de sites sous WordPress.
J’espère surtout que les développeurs débutants auront compris que quand on leur conseille de modifier par exemple les propriétés de telle ou telle balise CSS, nous ne la sortons pas de notre chapeau… mais des outils de développement de notre navigateur ! 😉
Ayez donc le réflexe : Clic droit -> Inspecter !