Narzędzia dla programistów przeglądarki: jaka jest pozycja elementu HTML?

Question

Nowoczesne narzędzia programistów internetowych (w Chrome/FF/IE, np.) Zapewniają sposób na zobaczenie "Modelu pudełka" i "Właściwości CSS obliczonego" konkretnego elementu. Jednak;

Czy istnieje sposób na łatwe monitorowanie pozycji obliczeniowej/układu za pomocą takich narzędzi?

---

Najlepiej absolutny, ale w pojemniku nadrzędnym jest również odpowiedni. Mam możliwość korzystania z którejkolwiek z wymienionych wcześniej przeglądarek [Windows], ale wolę używać przeglądarki Chrome.

Answer 1

W Chrome, Firefox, Edge i IE11 +, gdy wybrany jest element, można uzyskać dostęp do tego elementu w oknie konsoli wpisując:

$0

Następnie można wyszukiwać i manipulować przy użyciu Javascript DOM API, który ma bardzo przydatną metodę o nazwie Element.getBoundingClientRect().

Więc wszystko co musisz zrobić, to wpisz następujące polecenie w oknie konsoli, gdy wybrano element:

$0.getBoundingClientRect()

a przeglądarka powróci obiekt, taki jak:

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

Answer 2

Narzędzia do przeglądarki Chrome -> Ustawienia -> Ogólne -> Elementy -> Pokaż linijki.

Można również zainstalować wtyczki do Chrome, które zapewnią trochę więcej funkcji.