Inspecter le modèle de boîte d'un élément facilement avec XRAY

Avez-vous déjà voulu connaître la taille exacte d'un certain élément dans une page Web comme le remplissage, la marge, la position et ainsi de suite? Habituellement, vous pouvez obtenir l'information en utilisant un outil d'inspection Web; la plupart des navigateurs ont des outils intégrés pour vous aider à le faire. Alternativement, vous pouvez utiliser Firebug, qui est également un outil web très populaire. Lorsque les choses se compliquent cependant, peut-être que vous avez besoin de se rabattre sur un outil comme XRAY.

XRAY est un outil gratuit multi-navigateur qui vous permet de voir le modèle de boîte pour n'importe quel élément d'une page Web directement dans votre navigateur. Contrairement à d'autres outils d'inspection Web complexes, XRAY se concentre sur vous donner des informations complètes sur le modèle de boîte de l'élément.

Commencer

XRAY est un bookmarklet. Pour l'utiliser, faites glisser XRAY dans la barre de favoris de votre navigateur préféré. XRAY est disponible pour les navigateurs IE6 +, Webkit et Mozilla comme Safari et Firefox.

Tout comme les autres bookmarklets, XRAY ne peut pas fonctionner si le protocole SSL (HTTPS) est appliqué .

Inspection des éléments

Pour commencer l'inspection, ouvrez une page Web que vous souhaitez inspecter, assurez-vous qu'elle est complètement chargée et appuyez sur le signet XRAY. Vous obtiendrez une nouvelle fenêtre contextuelle dans votre navigateur. Cette boîte affichera toutes les informations sur l'élément que vous avez sélectionné.

Utilisons mon inspection de la page d'accueil XRAY comme exemple. Dites que je veux connaître les informations du modèle de boîte de l'élément suivant.

Je clique sur XRAY dans la barre de favoris, et sélectionne l'élément. Cela me donne le nom, l'identifiant, la classe, la hiérarchie, la position, le remplissage, la bordure et la marge de l' élément .

Pour fermer la boîte, appuyez simplement sur le bouton X dans le coin supérieur droit de la boîte ou rafraîchissez votre page pour quitter l'outil.

Pensée finale

Mis à part sa fonction d'inspection de modèle de boîte avancée, XRAY ne vous fournit pas les informations généralement disponibles dans d'autres outils d'inspection Web, comme le style ou DOM . Quoi qu'il en soit, c'est toujours un outil très utile et facile à utiliser pour une utilisation quotidienne.

Contrôle VR: Transformez vos mains en un contrôleur de réalité virtuelle

La réalité virtuelle devient peu à peu plus courante avec la technologie telle que l'Oculus Rift attirant l'attention des fans et des grands noms partout dans le monde. Ces technologies nous permettent de nous immerger dans un monde virtuel . Avec tout ce progrès, il est temps que nous progressions d'utiliser des contrôleurs, non?Cont

(Conseils techniques et de conception)

Guide pour stimuler votre carrière freelance avec Pro Bono Work

Les personnes qui débutent dans la conception et le développement web, l'écriture ou tout autre type de travail créatif ont peu à montrer dans leur portfolio. Et c'est un problème potentiellement majeur car des milliers d'experts avec des séries de portefeuilles sont déjà sur un marché saturé. Quel avan

(Conseils techniques et de conception)