Affichage des grilles dans le débogueur du navigateur

Lorsque l'on travaille avec des grilles lors de la création de sites web, il peut être nécessaire de vérifier si le placement des éléments dans la grille est correct. De plus, si une erreur a été commise, nous devons identifier à partir de quel élément le mauvais placement commence. Dans ce but, nous pouvons utiliser le débogueur du navigateur.

Examinons une grille en utilisant le débogueur de Chrome. Commencez par sélectionner l'objet qui nous intéresse avec une grille, faites un clic droit et choisissez dans la liste l'option 'Inspecter l'élément' :

Maintenant, dans le panneau du navigateur ouvert sur la droite, passez la souris sur notre objet avec la grille et remarquez que sur la ligne à côté de l'élément parent se trouve un bouton grid :

Après avoir cliqué sur le bouton grid, nous verrons que notre objet est affiché dans un système de grille visuellement compréhensible, avec la numérotation de toutes les colonnes et toutes les lignes :

Maintenant, portez votre attention sur le panneau dans le débogueur. Il contient les onglets Styles, Computed, Layout et autres. Passez de l'onglet Styles, qui est actif par défaut, à l'onglet Layout. Vous verrez une liste des paramètres de votre grille :

Choisissons d'afficher la première option Show track sizes, qui montre la taille des pistes :

Avec l'option Show area names on peut afficher les noms des zones de la grille, s'ils sont définis. Et en choisissant l'option Extend grid lines nous verrons les lignes des pistes prolongées au-delà du cadre de la grille :