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.

5 nouveaux langages de programmation à apprendre en 2017

Être un développeur a été un choix de carrière pour un certain temps, et il est difficile d'imaginer que cela va changer de sitôt. Que vous veniez juste de commencer ou que vous soyez un programmeur expérimenté, votre question la plus fréquemment posée sera probablement de savoir quoi apprendre ensuite?L'ind

(Conseils techniques et de conception)

50 Tasses à café Vous ne ferez pas attention à obtenir un changement

Si vous êtes un grand amateur de café comme moi, vous n'aurez jamais assez de tasses à café . Une bonne tasse pour le café ou même le thé vous fait sentir à la maison et confortable - même au bureau. Plutôt qu'une simple pièce de céramique, de nos jours, les tasses peuvent être une œuvre d'art ou un objet qui montre le goût personnalisé de leurs propriétaires .Dans cette colle

(Conseils techniques et de conception)