Pixel Ruler

Pixel Ruler вимірює пікселі на будь-якій веб-сторінці: екранна лінійка для розмірів елементів і відступів.

Pixel Ruler кладе лінійку поверх екрана й дає змогу виміряти будь-що у браузері. Натисніть іконку на панелі інструментів, протягніть мишею по макету й прочитайте точну відстань у CSS-пікселях. Наведіть курсор на елемент — і побачите його ширину, висоту, padding і відступи до сусідніх блоків. Числа збігаються з DevTools, бо розширення читає ті самі CSS-пікселі, якими браузер малює сторінку. Не треба відкривати панель, експортувати знімок екрана чи щось рахувати в голові. Просто екранна лінійка поверх сайту, який ви й так дивитеся. Один шар, і нічого перемикати: 📏 Затисніть і потягніть, щоб виміряти відстань між будь-якими двома точками сторінки. 📏 Наведіться на елемент і побачте його розмір, padding та відступи до сусідів. 📏 Ставте вертикальні й горизонтальні напрямні та вирівнюйте блоки за ними. Лінійка завжди на екрані як орієнтир, а одна клавіша копіює результат у буфер обміну разом із CSS-селектором елемента під курсором. Як почати, за три кроки: 1. Встановіть розширення й закріпіть його на панелі інструментів. 2. Відкрийте сторінку, над якою працюєте, і натисніть іконку. 3. Тягніть, наводьте, вимірюйте — коли завершите, натисніть Esc двічі. Фронтенд-розробники звіряють верстку з макетом. Дизайнери беруть її як лінійку для сторінки, коли файл передачі вже застарів. QA-інженери заводять баг із реальним числом замість «кнопка ніби трохи низько». Будь-хто, кому треба швидко виміряти пікселі на живому сайті, отримує результат за два кліки. Що дає ця веб-лінійка: - відстань між будь-якими двома точками, у пікселях - ширину й висоту будь-якого елемента на сторінці - padding, margin і проміжки між сусідами - відступи від елемента до блоків навколо - шкали вздовж верхнього й лівого країв вікна - тег, класи й CSS-селектор виміряного елемента - багаторазові напрямні для перевірки вирівнювання Керування з клавіатури тримає курсор рівно: → Shift фіксує вимірювання по горизонталі або вертикалі → Стрілки зсувають поточну точку рівно на 1 px → Esc прибирає поточне вимірювання, другий Esc повертає сторінку → Одне поєднання клавіш копіює результат у буфер обміну Встановіть один раз — і у вас та сама піксельна лінійка, що й у користувачів Windows, Linux і ChromeOS, і та сама піксельна лінійка, що й у власників Mac, бо інструмент живе у браузері, а не в операційній системі. Немає чого завантажувати й шукати, немає інсталятора й прав адміністратора: розширення приходить із Chrome Web Store одним кліком. На старті це безкоштовна піксельна лінійка, усі функції відкриті для всіх. Програма-лінійка, що відкривається в окремому вікні, починає міряти не те, щойно сторінка прокрутиться. Ця піксельна лінійка малюється всередині вкладки й прокручується разом із вмістом. Це піксельна лінійка онлайн: працює на живій сторінці, на staging-сервері, на сайті клієнта, за логіном. Настільна піксельна лінійка, яка міряє статичну картинку вікна, так не вміє. Треба перевірити ілюстрацію чи логотип? Користуйтеся нею як піксельною лінійкою для зображень — наведіться на картинку й прочитайте її відрендерений розмір, який часто відрізняється від розміру у вихідному файлі. Запитання та відповіді З: Як виміряти пікселі на екрані, не відкриваючи DevTools? В: Натисніть іконку й потягніть. Шар лежить поверх сторінки, тож ви міряєте саме те, що бачите, — зокрема стани наведення, які зникають, коли фокус перехоплює панель. З: Екранна лінійка, лінійка в пікселях, лінійка для сайту, px ruler, pixelruler — що з цього воно? В: Усе разом. Інструмент один, змінюється лише пошукова фраза. З: Чи може вона міряти в сантиметрах або дюймах? В: Ні. Це піксельна лінійка, і вона показує лише CSS-пікселі — ту саму одиницю, яку ви пишете у стилях. З: Чи працює вона всюди? В: На звичайних сайтах — так. Системні сторінки Chrome, вбудований переглядач PDF і вміст iframe з іншого домену закриті для всіх розширень, включно з цим. З: Які дані вона збирає? В: Жодних. Нуль мережевих запитів, без облікового запису й реєстрації. Під час встановлення не просить страшних дозволів і торкається сторінки лише після того, як ви натиснули іконку. Старі звички повільніші й менш точні: прикладати пластикову лінійку до скла монітора або рахувати пікселі на скріншоті. Лінійка для екрана комп'ютера має жити у браузері, перемальовуватися, коли верстка перебудовується, і говорити тими самими одиницями, що й код. Саме це робить цей екранний шар — і саме тому піксельна лінійка для сайтів виграє в лінійки, накладеної на скріншот у графічному редакторі. Опис доступний 52 мовами, тож веб-лінійка в пікселях знайдеться однією пошуковою фразою й вашою. Встановіть, виміряйте пікселі на наступній відкритій сторінці й тримайте екранну лінійку за один клік до кінця дня.