Utiliser le debug sur navigateur

Un site web est une mécanique fragile, une ensemble de bouts de code reposants sur d'autres bouts de code. Et lorsque vous créez vos pages, vous n'avez pas à votre disposition toute une équipe de testeurs pour vérifier que tout va bien et pour identifier les problèmes. Heureusement un outil intégré nativement à votre navigateur va vous permettre de faire ce travail bien plus efficacement : le debug.

NB : Le navigateur est le logiciel qui vous permet d'accéder à internet, à ne pas confondre avec le moteur de recherche. Par exemple, vous pouvez utilisez le navigateur Google chrome, Firefox, Edge ... en utilisant le moteur de recherche Google, Bing, Ecosia, Qwant ...

Tour d'horizon

Accéder à l'outil de debug

Ouvrez une page de votre site comme si vous étiez un utilisateur normal
- exemple : www.supersite.fr/a-propos
Appuyez sur la touche F12.
- Si la touche F12 ne marche pas, vérifiez que vous n'avez pas des commandes spéciales activées à la place de vos touches F

*Dans notre exemple, nous utilisons le navigateur Google chrome*

Les principaux outils

Tester le périphérique

Cet outil vous permet de tester beaucoup plus précisément la largeur à la hauteur de la fenêtre de navigation :

Cliquez sur l'icône en forme d'écran (généralement en haut à gauche de la barre de debug).

Une fois cette icône cliquée, vous verrez apparaître une nouvelle interface :

Vous pouvez redimensionner manuellement la fenêtre en saisissant le coin avec la souris.
En haut de page, l'onglet pourcentage vous permet de simuler l'affichage sur un écran plus grand que celui que vous avez.
- Par exemple, à 50%, vous simulez l'affichage sur un écran deux fois plus grand que le vôtre.
Cliquer sur l'onglet dimensions vous permet de simuler directement un format d'écran. Vous pouvez aussi créer vos propres formats !

Sélectionner un élément

Sur les mise en page complexes, il n'est pas toujours facile de retrouver un élément de votre page en particulier, surtout si cet élément est à l'origine d'un bug. Avec cet outil, vous pourrez le retrouver immédiatement et afficher ses caractéristiques :

Cliquez sur l'élément avec une flèche ou une souris juste à gauche de l'outil pour tester le périphérique.

Une fois l'outil sélectionné, vous verrez apparaître des formes de couleurs au survol de la souris, qui représentent les contour de l'élément que vous sélectionnez.

*Dans notre exemple, non sélectionnons un bouton. Le code couleur nous indique les contour de l'élément (qui correspondent ici à la bordure du bouton)*

Une fois le bouton sélectionné, son emplacement dans l'arborescence est indiqué :

Vous pouvez ainsi connaître directement plusieurs informations, par exemple :

L'id de l'élément
Sa classe
Son conteneur parent

Mais ce n'est pas tout ! Ici, nous rentrons dans une partie plus avancée. Vous pouvez également connaître et modifier directement sur le navigateur toutes les règles CSS de l'élément, en consultant le panneau de styles :

Dans notre exemple, les styles de l'élément dépendent de deux choses :

L'id (#div_block-1877-44), qui s'applique en priorité
La classe (.contenu_button_diagonal), qui s'applique ensuite

Vous pouvez activer ou désactiver des règles en cochant / décochant la case à gauche d'une règle. Cela affectera uniquement la version qui s'affiche actuellement dans votre navigateur, il vous suffira de recharger la page pour que tout revienne à la normale. Pour une fois, N'ayez donc pas peur de toucher à tout !