Measure Distance vous permet de cliquer sur deux éléments d'une page web et de voir instantanément la distance en pixels exacte entre eux — horizontalement (X), verticalement (Y) et en diagonale. Des lignes de connexion visuelles avec des mesures étiquetées apparaissent entre les éléments, et une barre d'informations affiche les dimensions des deux éléments ainsi que les distances dans les trois directions.
Vérifier l'espacement entre deux éléments dans les DevTools du navigateur nécessite de survoler chaque élément séparément, de lire les valeurs de margin/padding, et de faire des calculs mentaux pour obtenir la distance visuelle réelle. Measure Distance élimine tout cela. Cliquez sur l'Élément A, cliquez sur l'Élément B, et les distances en pixels exactes apparaissent immédiatement — X (horizontal), Y (vertical) et diagonal — affichées sous forme de lignes étiquetées reliant les deux éléments directement sur la page. L'outil mesure depuis les bords des éléments (bounding boxes), de sorte que les valeurs représentent l'espace visuel réel entre les éléments tel que l'utilisateur le voit. C'est différent de la lecture des valeurs de margin/padding, qui ne tiennent pas compte de l'effet cumulatif de plusieurs propriétés d'espacement. Chaque élément sélectionné est mis en évidence avec une bordure colorée et affiche ses propres dimensions (largeur × hauteur), vous permettant de voir à la fois les tailles des éléments et l'espacement entre eux en une seule vue.
Cliquez sur le premier élément (mis en évidence avec une bordure bleue), puis sur le second (mis en évidence avec une bordure verte). Les distances entre leurs bounding boxes sont calculées et affichées instantanément. Aucun glisser-déposer, aucune saisie manuelle — juste deux clics.
Voyez simultanément la distance horizontale (X), la distance verticale (Y) et la distance diagonale — chacune affichée avec sa propre ligne de mesure colorée et son étiquette. X en ambre, Y en rouge, diagonal en violet.
Des lignes de mesure en pointillés relient les deux éléments sélectionnés directement sur la page, avec des étiquettes de distance positionnées au milieu de chaque ligne. La représentation visuelle rend immédiatement évident ce qui est mesuré.
Chaque élément sélectionné affiche ses propres dimensions largeur × hauteur dans une petite étiquette. Cela vous permet de voir à la fois les tailles des éléments et l'espacement entre eux dans la même vue — sans changer d'outil.
Cliquez sur une nouvelle paire d'éléments pour mettre à jour instantanément les mesures. Inutile de désactiver puis de réactiver l'outil. Les lignes de mesure précédentes sont remplacées par de nouvelles pour la nouvelle paire d'éléments.
Une barre d'informations persistante en bas du viewport affiche un résumé compact : noms et dimensions des deux éléments, ainsi que les trois valeurs de distance (X, Y, diagonal). Facile à copier pour coller dans des rapports de bugs ou des retours de design.
La maquette indique que le bouton doit se trouver à 24px sous le titre. Cliquez sur le titre, cliquez sur le bouton, et confirmez que la distance Y est exactement 24px. Permet de détecter des écarts d'espacement subtils invisibles à l'œil mais spécifiés dans les design tokens.
Mesurez la distance entre la Carte 1 et la Carte 2, puis entre la Carte 2 et la Carte 3. Si les espacements ne sont pas identiques, vous avez trouvé une incohérence — probablement causée par des marges différentes ou un problème de gap flexbox.
Mesurez les distances entre éléments à la largeur desktop, puis redimensionnez le navigateur et mesurez à nouveau à la largeur mobile. Vérifiez que l'espacement s'adapte correctement aux breakpoints et que les ajustements de margin/padding responsive fonctionnent comme prévu.
Incluez des mesures précises dans vos rapports de bugs : « L'espace entre la nav et le hero est de 47px, il devrait être de 32px selon la spécification de design. » Les valeurs de la barre d'informations peuvent être copiées directement dans des tickets Jira ou des issues GitHub.
Cliquez sur deux éléments qui devraient être alignés horizontalement. Si la distance Y est de 0px, ils sont parfaitement alignés. Toute valeur Y non nulle indique un désalignement vertical — le chiffre exact vous indique de combien de pixels il est décalé.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Measure Distance. Le curseur se transforme en réticule, indiquant que vous pouvez sélectionner le premier élément.
Cliquez sur n'importe quel élément de la page. Il est mis en évidence avec une bordure bleue et étiqueté « Élément A » avec ses dimensions (largeur × hauteur en pixels).
Cliquez sur un second élément. Il est mis en évidence avec une bordure verte et étiqueté « Élément B ». Les lignes de mesure apparaissent immédiatement en reliant les deux éléments.
Trois lignes de mesure apparaissent : horizontale (X) en ambre, verticale (Y) en rouge et diagonale en violet. Chaque ligne comporte une étiquette indiquant la distance en pixels. La barre d'informations en bas résume toutes les valeurs.
Cliquez sur une autre paire d'éléments pour mesurer instantanément une nouvelle distance. Cliquez sur l'icône Measure Distance dans le dock pour désactiver l'outil une fois terminé.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
