Navigateur outils de développement: quelle est la Position de l'élément HTML?
Moderne Développeur Web (outils en Chrome /FF /IE, par exemple.) fournir un moyen de voir le "Modèle de Boîte" et "Calculé Propriétés CSS" d'un élément particulier. Cependant,
Est-il un moyen pour surveiller la final calculé/position de mise en page facilement avec de tels outils?
De préférence absolue, mais à l'intérieur du conteneur parent est également adapté. Je suis modifiable à l'aide de toute mentionné précédemment [Windows] les navigateurs, mais préfèrent utiliser Chrome.
OriginalL'auteur user2864740 | 2014-11-08
Vous devez vous connecter pour publier un commentaire.
Dans Chrome, Firefox, Edge et IE11+, lorsqu'un élément est sélectionné, vous pouvez accéder à cet élément dans la fenêtre de la console en tapant:
$0
Ensuite, vous pouvez interroger et manipuler à l'aide de la Javascript API DOM, qui a une méthode très utile appelé De l'élément.getBoundingClientRect().
De sorte que tous vous avez à faire est de taper la commande suivante dans la fenêtre de la console lorsqu'un élément est sélectionné:
$0.getBoundingClientRect()
et le navigateur retourne un objet tel que:
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }
OriginalL'auteur Wayne Maurer
Chrome dev tools -> Paramètres -> Général> Éléments -> Afficher les Règles.
Vous pouvez également installer google Chrome plugins qui vont vous donner un peu plus de fonctionnalités.
Je n'ai pas vraiment besoin de quelque chose en plus de la base de règles, donc je n'ai pas vraiment de l'éducation de la recommandation sur le plugin. Il semble y avoir un certain nombre d'entre eux là-bas et de la fonctionnalité ressemble, il peut être proche de ce que vous avez besoin.
OriginalL'auteur dwilson