Инструменты разработчика браузера: какова позиция элемента HTML?

Question

Современные инструменты веб-разработчика (в Chrome/FF/IE, например.) Предоставляют возможность увидеть «Кодовую модель» и «Вычисленные свойства CSS» для определенного элемента. Однако;

Есть ли способ отслеживать окончательный с помощью таких инструментов?

---

Предпочтительно абсолютное, но в пределах родительского контейнера также подходит. Я могу использовать любой из ранее упомянутых браузеров [Windows], но предпочитаю использовать Chrome.

Answer 1

В Chrome, Firefox, Край и IE11 +, если выбран элемент, вы можете получить доступ к этому элементу в окне консоли, набрав:

$0

Вы можете запрашивать и манипулировать с помощью Javascript DOM API, который имеет очень полезный метод, называемый Element.getBoundingClientRect().

Так все, что вам нужно сделать, это ввести следующую команду в окне консоли, когда выбран элемент:

$0.getBoundingClientRect()

и браузер будет возвращать объект, такой как:

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

Answer 2

Инструменты Chrome dev -> Настройки -> Общие -> Элементы -> Показать линейки.

Вы также можете установить плагины Chrome, которые предоставят вам немного больше функциональности.