CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
Измеряйте размеры, расстояния, отступы и внутренние отступы любого элемента на любой веб-странице.
Image from store
Description from store
Screen Ruler - это идеальный помощник для веб-разработчиков и дизайнеров, желающих проверить реализацию своих веб-сайтов. После активации Screen Ruler позволяет просматривать размеры, отступы, внутренние отступы, имена тегов, ID и классы, просто наведя курсор на любой элемент. Вы также можете выбрать элемент для измерения расстояний до других элементов.
Использование
- Переключите Screen Ruler, нажав на значок расширения, выбрав "Screen Ruler" из контекстного меню правой кнопки мыши или используя сочетание клавиш Alt/Option + Shift + R.
- Наведите курсор на элементы веб-страниц для отображения их размеров, отступов, внутренних отступов, имен тегов, ID и классов.
- Выберите элемент, нажав на него напрямую, это сделает подсветку красной. Для отмены выбора нажмите снова, нажмите Escape или выберите другой элемент.
- Для выбора родительского элемента используйте Alt/Option + Вверх, перемещая ваш выбор к родительскому элементу, используйте Alt/Option + Вниз для обращения вашего выбора.
- Просмотрите вычисленный CSS текущего выбранного элемента в боковой панели. Нажмите кнопку "Copy CSS" для копирования вычисленного CSS текущего выбранного элемента в буфер обмена.
Функции
- Измерение размера в пикселях любого элемента.
- Измерение расстояния в пикселях между любыми двумя элементами.
- Имена HTML тегов, имена классов и ID.
- Сочетания клавиш для выбора родитель/дочерний элемент.
- Адаптивные выборы изменяются вместе с окном браузера.
- Доступ из контекстного меню.
- Проверка вычисленного CSS.
- Копирование CSS в буфер обмена.
- Работает на любой веб-странице.
- Настройте сочетания клавиш, посетив chrome://extensions/shortcuts.
Screen Ruler PRO
Screen Ruler также предлагает уровень PRO, который разблокирует дополнительные функции.
1. Плавающий Инспектор: Просматривайте подробные свойства элементов при наведении, включая позицию, размер, отрендеренный шрифт, цвета и многое другое.
2. Визуализация Блочной Модели: Диаграмма блочной модели, показывающая отступы, границы, внутренние отступы и размеры содержимого.
3. Анализ Анимации: Визуализируйте кривые времени CSS анимации и копируйте CSS свойства анимации.
4. Извлечение Ресурсов: Извлекайте и загружайте изображения, SVG и векторные ресурсы напрямую с любой веб-страницы.
5. Извлечение Цветов: Извлекайте и копируйте цветовые палитры из выбранных элементов со значениями hex, RGB и HSL.
6. Наложение Сетки Макета: Наложите настраиваемую сетку макета для идеального выравнивания дизайна.
7. Скриншоты Элементов: Захватывайте обрезанные скриншоты выбранных элементов используя Ctrl/Cmd + Shift + S.
8. Поиск по CSS Селектору: Находите и выделяйте элементы используя CSS селекторы.
9. Продвинутая Боковая Панель: Полный анализ элементов включая вычисленные стили, блочную модель, цвета, ресурсы и анимации.
Screen Ruler PRO требует единовременной оплаты для пожизненного доступа.
Screen Ruler создан для
- Разработчиков: Обнаружение проблем с макетом или выявление проблем с выравниванием. Независимо от того, настраиваете ли вы отступы и внутренние отступы, или просто убеждаетесь, что все правильно выровнено, Screen Ruler становится незаменимым дополнением к вашему набору инструментов разработки.
- Дизайнеров: Убедитесь, что ваши дизайны были реализованы с точностью до пикселя. Screen Ruler действует как мост между дизайном и разработкой, позволяя вам проверить, что каждый элемент выровнен именно так, как вы задумывали.
Установка
- Screen Ruler разработан специально для стабильности в Google Chrome 116+.
- Screen Ruler устанавливается на любой браузер Chromium, однако для лучшего опыта убедитесь, что ваш браузер поддерживает все необходимые API (такие как Side Panel и Offscreen). Если возникают проблемы с установкой, обновите браузер до последней версии и попробуйте снова.
Latest reviews
- (2025-08-05) André Cavallari: One of most useful front-end extensions, it worth each cent, had an issue with my activation but the author was pretty quick to answer and find a solution, so I recommend it to every developers.
- (2025-06-24) Victor Biletskiy: Alt/Option + Shift + R seems does not work to toggle via shortcut.. How to open and close extensions using hotkeys? So you don't have to click the mouse all the time
- (2025-06-13) Richard Brus: A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites. Great job 10/10
- (2025-05-12) Misha Vs: This is the best on-screen roulette/ruler available in the Chrome Store, but it has recently stopped working in the Yandex Browser 😭 (I need to work in it from time to time)
- (2025-04-02) T VICKY: Love it
- (2025-03-03) Kelvin Ugbana: Perfect.. Works for me
- (2025-02-27) Fynn: Pretty good, but doesn't seem to display gap information unless it's in a grid/flex (which is the main information I want to view). It also doesn't allow you to scroll when active, so you have to toggle it off (and reopen the side panel, if you had it opened).
- (2025-02-11) R.c gamer: Great tool! I am a Web developer. It's really usefull for me.
- (2025-01-23) Muhammad Usman: love it 👍🏻
- (2024-11-29) Chikezie Iroegbu: Great tool! But after the last update, the side panel now opens every time. I should be able to toggle it off if I don't need it.
- (2024-11-28) Anna F.: Lovely! Just like Figma's rulers. Haven't used it much but seems to work exactly as expected so far. Thanks! UPDATE: recently the side panel started popping up by itself whenever I enable the extension! I don't want that! I'm using Brave browser and there's no easy way to remove the side panel. I have to switch to one of the Braves' panels and then minimize that to get rid of it. Can you please add an option to not enable the side panel whenever you enable the extension?
- (2024-09-24) Danny Feliz: I can't open the side panel using the floating menu; I only need to click the extension's context menu. I'm using the latest version of Chrome; it happens on all the sites.
- (2024-09-11) Ishan Shah: Side bar does not open. There should be a pause button next to the exit/stop button. I need to reopen it multiple times (although you can still use a shortcut.) the UI overall is nicely designed.
- (2024-09-10) Hashaam Ahmed: Nice, but the side panel doesnt popup on most of the sites using the navigation/bar below the screen, need to right click on the extension to view the side panel. Thank you.
- (2024-09-06) Patrik Gustavsson: Side panel doesn't work on Arc browser for me :( (using latest Mac OS)
- (2024-08-23) Levy Santa Ana: Not working
- (2024-08-21) Manuel Avella-Salazar: Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
- (2024-08-07) Shane: Exactly what I was looking for. Excellent!
- (2024-07-25) Best Lay: Very Good
- (2024-06-17) Александр Ратманский: Nice!
- (2024-05-20) Walter Córdoba: ¡Fantastic!
- (2024-05-08) Dave Mejias: This extension is incredible... Do you have any contact info? I need help to buy pro.
- (2024-04-13) JaeHun Sim: Awesome