Strumenti di sviluppo del browser: qual è la posizione dell'elemento HTML?

Question

Gli strumenti di sviluppo Web moderni (in Chrome/FF/IE, ad es.) Forniscono un modo per vedere il "Box Model" e le "Proprietà CSS calcolate" di un particolare elemento. Però;

C'è un modo per monitorare facilmente la posizione calcolata/layout finale con tali strumenti?

---

Preferibilmente assoluta, ma all'interno del contenitore principale è anche adatto. Sono modificabile all'utilizzo di uno qualsiasi dei browser [Windows] menzionati in precedenza, ma preferisco utilizzare Chrome.

Answer 1

In Chrome, Firefox, Edge e IE11 +, quando si seleziona un elemento, è possibile accedere a questo elemento nella finestra della console digitando:

$0

È quindi possibile interrogare e manipolare usando il Javascript DOM API, che ha un metodo molto utile chiamato Element.getBoundingClientRect().

Quindi, tutto quello che dovete fare è digitare quanto segue nella finestra della console quando si seleziona un elemento:

$0.getBoundingClientRect()

e il browser restituirà un oggetto come:

{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }

Answer 2

Strumenti di sviluppo di Chrome -> Impostazioni -> Generale -> Elementi -> Mostra righelli.

È inoltre possibile installare plug-in di Chrome che offriranno un po 'più di funzionalità.