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

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

Можно ли легко отслеживать окончательную вычисленную/макетную позицию с помощью таких инструментов?

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

Ответ 1

В Chrome, Firefox, Edge и 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 }

Ответ 2

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

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