Dimensions

Une phrase pour présenter

Dimensions est une extension de navigateur permettant de mesurer les dimensions de l’écran d’une page web ; elle peut déterminer les limites vers le haut, le bas, la gauche et la droite à partir de la position de la souris, afin de visualiser rapidement la distance en pixels entre les éléments et la taille des zones contiguës.

Présentation des outils

Dimensions a été développé par Felix Niklas et s’adresse principalement aux concepteurs de sites web, aux développeurs front-end et aux testeurs de qualité. C’est un outil de mesure léger qui ne génère pas de contenu, ne dispose d’aucun modèle de langage grandeur nature et n’appartient pas à la catégorie des produits d’IA.

Le domaine dimensions.ink, utilisé à l’origine dans les enregistrements de la base de données, a été modifié pour contenir du matériel de jeu non lié aux produits, et ne peut donc plus servir d’entrée officielle. Les entrées fiables actuelles sont le magasin officiel du navigateur et le dépôt open source géré par mrflix.

Aperçu des fonctionnalités principales

Fonction principale

Mesurer l’espace entre les éléments de la page web

L’extension cherche des couleurs ou des limites d’éléments dans les quatre directions à partir de la position de la souris, et affiche la distance. Elle est idéale pour vérifier l’espace entre des images, des champs de saisie, des boutons, des vidéos, des GIF, du texte et des icônes.

Mesurer une région continue

En maintenant la touche Alt, il est possible de mesurer des zones continues, ce qui convient pour estimer le rayon d’un cercle ou la taille d’une zone monochrome. Les dégradés, les ombres et les textures entraînent de nombreux changements de pixels, ce qui peut faire que la délimitation s’arrête prématurément.

Mesure du croquis de conception

L’utilisateur peut glisser directement les fichiers PNG ou JPEG dans Chrome, puis lancer Dimensions pour effectuer des mesures. Le zoom du navigateur doit être maintenu à 100 %, sinon les pixels de l’écran pourraient ne pas correspondre aux pixels originaux du design.

Raccourci

Par défaut, les extensions peuvent être activées ou désactivées en appuyant sur Alt + D ; pour mesurer une zone, utilisez la touche Alt en complément. Si le raccourci entre en conflit avec le système d’exploitation ou d’autres extensions, vous pouvez le réinitialiser sur la page des raccourcis des extensions du navigateur.

Ajustement automatique de la couleur

L’extension ajuste la couleur des marques de mesure en fonction du fond, améliorant ainsi la lisibilité sur les pages sombres et claires. Les arrière-plans complexes peuvent toutefois rendre les valeurs difficiles à distinguer ; il est possible de cacher temporairement les éléments perturbateurs.

Guide d’installation

1. Ouvrez le magasin officiel d’extensions de Chrome et recherchez le nom complet Dimensions.
2. Vérifier les informations du développeur, le numéro de version 3.0.1 et la description de la fonction de mesure d’écran.
3. Vérifiez la divulgation des données de confidentialité et les permissions requises, puis cliquez sur Ajouter au navigateur.
4. Fixez l’extension à la barre d’outils pour faciliter son démarrage en l’absence de raccourci.
5. Ouvrez une page web de test, appuyez sur Alt + D pour confirmer l’apparition de la couche de mesure.
6. Après avoir terminé la mesure, appuyez à nouveau sur la touche rapide pour fermer, afin de ne pas perturber la navigation normale.

Tutoriel sur la mesure des dimensions des pages web

1. Ajustez la taille de la page du navigateur à 100 % et déterminez si l’émulation d’appareil doit être activée.
2. Démarrez Dimensions, placez la souris sur l’espace ou le bord de l’élément à mesurer.
3. Lire la distance en pixels indiquée en haut, en bas, à gauche et à droite du pointeur.
4. Déplacer à une autre position pour effectuer des mesures répétées, afin d’éliminer les erreurs dues aux ombres ou au texte.
5. Pour obtenir les dimensions de la région, maintenez la touche Alt afin que l’outil identifie les bordures continues.
6. Vérifiez les résultats avec le modèle de boîte des outils de développement, les valeurs CSS et le rapport de pixels d’écran.
7. Enregistrer la largeur de la vue et les conditions de zoom pour éviter de mélanger des données provenant d’environnements différents.

Processus de vérification des maquettes de conception

1. Obtenez le fichier original PNG ou JPEG du design, non compressé par un logiciel de messagerie.
2. Ouvrez l’image dans une nouvelle vignette du navigateur et maintenez une mise à l’échelle de 100 %.
3. Démarrer Dimensions pour mesurer les marges, l’espace entre les composants et les blocs de couleur continus.
4. Utilisez des bordures manuelles ou des outils de développement pour les textures, les dégradés ou les zones d’ombre.
5. Comparer les valeurs mesurées avec les indications des documents de conception et le CSS réel du site web.
6. Lorsqu’une différence est détectée, vérifiez en même temps le rapport de pixels de l’appareil, le redimensionnement de l’image et les points de rupture responsifs.

À qui s’adresse-t-il

• Concepteur de site web : Vérification rapide des marges et des dimensions des composants dans le maquettage visuel.
• Développeur front-end : Vérifier les différences en pixels entre la page mise en œuvre et le maquettage.
• Testeur UI : Vérifier l’écart entre les boutons, les formulaires, les icônes et le texte.
• Chef de produit : Noter les problèmes d’agencement évidents lors de l’examen de la page.
• Étudiants et débutants : visualiser intuitivement les relations de taille entre les éléments d’une page web.
• Développeurs open source : étude ou amélioration de la logique de mesure sur la base du code MIT.

Scénarios d'utilisation typiques

• Mesurer l’écart horizontal entre l’icône de la barre de navigation et le texte.
• Vérifiez l’espace vertical autour des titres, des images et des boutons à l’intérieur de la carte.
• Estimer la taille d’affichage à l’écran d’un champ de saisie, d’un bouton ou d’une vidéo.
• Comparer les changements de marge dans la vue desktop et la vue responsive.
• Ouvrez le mockup statique et extrayez les références en pixels nécessaires au développement.
• Identifier les limites approximatives des blocs de couleur ou des zones circulaires continus.
• Localiser rapidement les décalages de mise en page dans les tests de régression visuelle.

Avantages du produit

• Pas de compte nécessaire, il suffit de l’installer pour l’utiliser.
• Simple à utiliser : déplacez la souris pour obtenir la distance dans les quatre directions.
• Prend en charge des contenus courants tels que des images, des boutons, des champs de saisie, des vidéos, du texte et des icônes.
• Permet de mesurer directement les maquettes PNG et JPEG dans le navigateur.
• L’archive d’installation est de petite taille et ne nécessite ni services cloud ni abonnement.
• La déclaration de confidentialité de la Chrome Store indique qu’aucunes données des utilisateurs ne sont collectées ni utilisées.
• Le code source est public, sous une licence MIT souple.
• La série 3.0 a migré vers Manifest V3, compatible avec le Chrome moderne.

Restrictions d'utilisation et précautions

• Dimensions n’est pas un outil d’IA ; il ne fournit que des mesures d’écran basées sur les bordures des pixels.
• L’ancien nom de domaine dimensions.ink a été transformé en site de jeu d’argent non pertinent ; il ne doit pas être consulté ni utilisé pour télécharger des fichiers.
• Les images et les arrière-plans complexes peuvent affecter la reconnaissance des contours en raison des changements fréquents de pixels.
• Les dégradés, les ombres, le anti-aliasing et la transparence peuvent provoquer des écarts de valeurs.
• Lorsque le zoom du navigateur n’est pas à 100 %, les valeurs de mesure peuvent ne pas correspondre aux dimensions originales de la conception.
• Les pixels CSS, les pixels d’écran et les pixels d’capture d’écran ne correspondent pas toujours un par un dans tous les environnements.
• Il ne peut pas remplacer les modèles d’outils de développement, les vérifications de réactivité et les tests d’accessibilité.
• La version Manifest V3 exige Chrome 88 ou une version ultérieure ; les anciens navigateurs ne sont plus pris en charge.
• L’extension ne propose qu’une interface en anglais ; aucune localisation officielle en chinois n’a été constatée.
• L’installation d’extensions augmente toujours la surface d’attaque du navigateur ; elles doivent être téléchargées uniquement depuis le magasin officiel.

Prix et versions

À partir du 22 août 2026, Dimensions est disponible gratuitement dans la boutique officielle de Chrome, sans abonnement, période d’essai ou forfait payant. Le code source du projet peut également être utilisé gratuitement sous la licence MIT.

Support des navigateurs et des versions

Confidentialité et sécurité

La boutique Chrome affiche que le développeur déclare ne pas collecter ou utiliser de données des utilisateurs, ni ne vendre de données, ni ne les utiliser à des fins non pertinentes ou pour évaluer la solvabilité. La logique de mesure principale de l’extension s’exécute sur la page actuelle.

• Installez uniquement depuis le magasin officiel Chrome, et n’utilisez pas les anciens noms de domaine expirés pour télécharger des fichiers.
• Vérifiez la version, le développeur, les permissions et la date de mise à jour avant l’installation.
• L’équipement des entreprises doit être contrôlé de manière centralisée grâce à une liste blanche étendue et à des politiques définies.
• Lors de la mesure des systèmes internes, il est encore nécessaire d’évaluer les droits d’accès étendus au contenu de la page.
• Vérifiez régulièrement la déclaration de confidentialité du magasin et les informations sur les mises à jour.
• Supprimez-le du navigateur lorsqu’il n’est plus utilisé, plutôt que de simplement cacher l’icône.

Risque de non-fonctionnement du nom de domaine du site officiel

Le site officiel de la base de données, dimensions.ink, affiche actuellement du contenu de jeu qui n’a aucun rapport avec les extensions de navigateur ; les noms des produits ainsi que l’usage des pages ont été modifiés. Ce domaine ne peut plus attester des fonctionnalités, des prix, de la politique de confidentialité ou de l’identité du développeur de l’extension.

L’utilisateur doit confirmer l’installation via le magasin officiel de Chrome et consulter le code ainsi que les versions dans le dépôt open source de mrflix. Il ne faut pas entrer ses identifiants ou des informations de paiement sur des noms de domaine expirés, ni télécharger de fichiers inconnus.

API, SDK et situation du logiciel open source

Dimensions est une extension de navigateur open source qui ne propose pas d’API cloud, de clés de développeur ni de SDK indépendant. Les développeurs peuvent lire et modifier directement le code source de l’extension, en respectant la licence MIT lors de sa redistribution.

Informations de base

Indice de recommandation

Le score de recommandation est de 3,8 sur 5. Dimensions est compact et simple d’utilisation, idéal comme référence rapide en pixels pour la conception de sites web et le développement front-end ; son statut open source ainsi que l’absence de politique de collecte de données sont également très transparents.

La pénalité est principalement due au fait qu’il ne s’agit pas d’un outil d’IA, que l’algorithme de mesure est sensible aux images complexes, et que le nom de domaine du site officiel d’origine est désormais invalide. Une livraison professionnelle nécessite encore l’utilisation des outils de développement du navigateur ainsi que des fichiers sources de conception.

Questions fréquentes

Dimensions est-il un outil d’IA ?

Non. Il effectue des mesures à l’écran en se basant sur les pixels et les bords de la page du navigateur, sans fonctionnalités d’IA générative, de modèles linguistiques ou d’apprentissage automatique.

Dimensions est-il gratuit ?

Gratuit, le Chrome Store ne propose ni abonnements ni achats intégrés. Le code source est également rendu public sous la licence MIT.

Faut-il s’inscrire ?

Ce n’est pas nécessaire. Après l’installation de l’extension, il est possible de lancer les mesures directement dans la page web.

Comment lancer la mesure ?

Par défaut, on utilise Alt + D pour l’activer ou le désactiver. Pour mesurer des zones continues, il est possible de maintenir la touche Alt enfoncée ; en cas de conflit de raccourci, il est possible de le modifier dans Chrome.

Pourquoi les mesures des images ne sont-elles pas précises ?

Les images, les dégradés et le anti-aliasing provoquent des variations de couleur au niveau de chaque pixel, et l’algorithme peut interpréter ces variations comme des contours. Il convient alors de faire appel aux outils de développement ou aux fichiers de conception.

Est-ce que c’est compatible avec le chinois ?

Le magasin ne liste actuellement que en anglais. Les fonctions s’effectuent principalement par des valeurs et des raccourcis clavier, mais il est toujours possible de mesurer sur la page en chinois.

Est-ce que des données de page web sont collectées ?

La déclaration de confidentialité actuelle de la Chrome Store indique que les développeurs ne collectent ni n’utilisent les données des utilisateurs. Les utilisateurs doivent néanmoins vérifier les permissions réelles lors de l’installation.

Le site officiel d’origine fonctionne-t-il encore ?

Ne peut pas servir d’entrée vers le produit. L’original dimensions.ink affiche déjà du contenu non lié au jeu, l’installation doit se faire via la boutique officielle Chrome.

Des API ou SDK sont-ils disponibles ?

Non fourni. Il s’agit d’une extension de navigateur que les développeurs peuvent utiliser directement avec le code open source MIT pour des recherches ou des modifications.

Dimensions est-il open source ?

Logiciel open source, le dépôt officiel est sous licence MIT. Le dépôt open source n’a aucun lien avec la base de données scientifique du même nom ni avec les plugins d’Inkscape.

Résumé

Dimensions est une extension légère pour navigateur qui se concentre sur la distance en pixels sur les pages web, idéale pour vérifier rapidement les espacements et les maquettes statiques, mais elle ne peut pas remplacer des outils complets de mesure pour le développement et le design.

Le changement le plus important actuel est que l’ancien nom de domaine du site officiel est désormais invalide. Les utilisateurs doivent l’installer depuis le magasin officiel et vérifier la version, le code et la licence via les dépôts open source.