Chrome DevTools ранее предлагал настройку для отображения линейки при проверке элементов. У него была пиксельная линейка по сторонам представления, а граничные линии для каждого элемента расширяли полный вид страницы.
Раньше это было найдено (как я помню) в "DevTools Settings/General". Больше нет раздела "Общие", и я не вижу его в "DevTools Settings/Appearance". Это было перемещено или удалено? Я не нахожу документацию или не обсуждаю ее.
Вы можете включить его в "Настройки DevTools"> "Настройки" в разделе "Элементы".
Обновление: большинство из них могут быть смущены тем, как его использовать. Чтобы использовать, откройте консоль и наведите курсор на элемент для просмотра линейки. Спасибо @Brandito за упоминание в комментарии.
Нажмите Toggle Device Toolbar 
, который находится в верхнем левом углу вашего окна DevTools.
Нажмите Дополнительные параметры и затем выберите Показать линейки.
Правители находятся слева и над вашим окном просмотра. Вы можете нажать на цифры, чтобы установить ширину и высоту для этого размера.
