Существует ли какое-либо расширение браузера (любой браузер), с помощью которого я могу проверить расстояние между элементами на отображаемой странице.
Обновление: Опробована линейка Firefox Dev Tools: но она не показывает расстояние между соседними элементами, как показано на рисунке выше. Чтобы получить это, мне нужно будет вручную определить точные значения согласно линейке, а затем вычесть значения двух соседних элементов.
Я использую JR Screen Ruler:
Бесплатная виртуальная линейка для экрана вашего компьютера
Эта Экранная Линейка - отличный инструмент, который позволяет вам точно измерить все на вашем экране. Это особенно полезно при измерении графики, размеров браузера веб-страницы или чего-либо еще. Линейка экрана может отображать пиксели, дюймы, пикы или сантиметры.
Исходная JR Screen Ruler
Используя правителей
Инструмент линейки полезен, чтобы иметь его всегда. Он позволяет быстро проверить, какой высоты или ширины страницы, насколько велики различные столбцы или боковые панели и сколько вы прокручивали.
Инструмент «Линейки» по умолчанию не включен, поэтому сначала его необходимо включить. Сделать это:
- откройте панель инструментов (я часто использую Ctrl + Shift + I как быстрый способ переключения инструментов, но это только я, F12 тоже работает, и, конечно, щелкнуть правой кнопкой мыши на странице и выбрать «осмотреть элемент» часто бывает легко) сделать это),
- переключиться на панель параметров (это значок cog на панели инструментов, справа или ctrl + shift + O),
- там много вариантов, не пугайтесь, просто прокрутите вниз до раздела «Доступные кнопки панели инструментов» и убедитесь, что флажок «Переключать линейки для страницы» установлен,
- После этого у вас появится симпатичная маленькая иконка на панели инструментов, которую вы можете просто нажать, чтобы переключать линейки.
Исходные измерительные элементы и расстояния в Firefox DevTools
Хром
Размеры - Интернет-магазин Chrome:
Это расширение измеряет размеры от вашего указателя мыши вверх / вниз и влево / вправо, пока не достигнет границы. Так что если вы хотите измерить расстояния между элементами на сайте, это идеально. На самом деле это не работает с изображениями, потому что цвета меняются от пикселя к пикселю.
Изображения и элементы HTML
Измеряйте между следующими элементами: изображения, поля ввода, кнопки, видео, GIF-файлы, текст, значки. Вы можете измерить все, что вы видите в браузере.
Page Ruler - Интернет-магазин Chrome:
Page Ruler позволяет рисовать линейку на любой странице и отображать ее ширину, высоту и положение.
Характеристики
- Нарисуйте линейку на любой странице и просмотрите ширину, высоту и верх, низ, левое и правое положение
- Перетащите края линейки, чтобы изменить ее размер
- Используйте клавиши со стрелками для перемещения и изменения размера линейки
- Показать направляющие, простирающиеся от краев линейки
- Обновите вручную размер и положение линейки с панели инструментов, чтобы внести изменения в точность
- Включите "Режим элемента" для выделения элементов на странице при наведении на них курсора.
- Перемещайтесь через родителей, детей и родных элементов любого измеряемого элемента
Fire Fox
MeasureIt - дополнения для Firefox:
Нарисуйте линейку на любой веб-странице, чтобы проверить ширину, высоту или выравнивание элементов страницы в пикселях.
Примечание - не совместимо с Firefox Quantum
