Pixel Ruler

با Pixel Ruler پیکسل‌ها را در هر صفحهٔ وب اندازه بگیرید: خط‌کشی روی صفحه برای اندازهٔ عناصر و فاصله‌ها.

Pixel Ruler یک خط‌کش روی صفحه می‌گذارد تا بتوانید هر چیزی را داخل مرورگر اندازه بگیرید. روی آیکن نوار ابزار کلیک کنید، ماوس را روی چیدمان بکشید و فاصلهٔ دقیق را بر حسب پیکسل CSS بخوانید. نشانگر را روی یک عنصر ببرید تا عرض، ارتفاع، پدینگ و فاصله‌هایش تا بلوک‌های اطراف را ببینید. اعداد با DevTools یکی است، چون افزونه همان پیکسل‌های CSS را می‌خواند که مرورگر صفحه را با آن‌ها رسم می‌کند. نه پنلی برای باز کردن، نه اسکرین‌شاتی برای گرفتن، نه حساب و کتاب. فقط یک خط‌کش پیکسلی روی همان سایتی که جلوی چشمتان است. یک لایه، بدون جابه‌جا شدن بین ابزارها: 📏 کلیک کنید و بکشید تا فاصلهٔ بین هر دو نقطهٔ صفحه را اندازه بگیرید. 📏 نشانگر را روی یک عنصر نگه دارید تا اندازه، پدینگ و فاصله‌اش تا همسایه‌ها را ببینید. 📏 خط‌های راهنمای عمودی و افقی بگذارید و بلوک‌ها را با آن‌ها تراز کنید. همیشه یک خط‌کش روی صفحه دم دستتان است و با یک کلید، نتیجه همراه با سلکتور CSS عنصر زیر نشانگر در کلیپ‌بورد کپی می‌شود. شروع کار در سه قدم: 1. افزونه را نصب کنید و آن را به نوار ابزار سنجاق کنید. 2. صفحه‌ای را که رویش کار می‌کنید باز کنید و روی آیکن کلیک کنید. 3. بکشید، نشانه بروید، اندازه بگیرید — وقتی کارتان تمام شد دو بار Esc را بزنید. توسعه‌دهنده‌های فرانت‌اند با آن چیدمان را با ماکاپ مقایسه می‌کنند. طراح‌ها وقتی فایل تحویلی دیگر به‌روز نیست، از آن به‌عنوان خط‌کش صفحه استفاده می‌کنند. مهندس‌های QA به‌جای «دکمه کمی پایین‌تر به نظر می‌رسد» باگ را با یک عدد واقعی ثبت می‌کنند. هر کسی که روی یک سایت زنده به اندازه‌گیری سریع پیکسلی نیاز دارد، با دو کلیک به آن می‌رسد. این خط‌کش وب چه چیزی به شما می‌دهد: - فاصلهٔ بین هر دو نقطه، بر حسب پیکسل - عرض و ارتفاع هر عنصر صفحه - پدینگ، مارجین و فاصله‌های میان عنصرهای همسایه - فاصلهٔ یک عنصر تا بلوک‌های اطرافش - خط‌کش مدرج در لبهٔ بالا و لبهٔ چپ پنجره - تگ، کلاس‌ها و سلکتور CSS عنصری که اندازه گرفته‌اید - خط‌های راهنمای قابل استفادهٔ دوباره برای بررسی ترازبندی کنترل با صفحه‌کلید دست را ثابت نگه می‌دارد: → Shift اندازه‌گیری را روی محور افقی یا عمودی قفل می‌کند → کلیدهای جهت‌دار نقطهٔ فعلی را دقیقاً 1 پیکسل جابه‌جا می‌کنند → Esc اندازه‌گیری فعلی را پاک می‌کند و Esc دوم صفحه را به شما برمی‌گرداند → یک میان‌بر نتیجه را در کلیپ‌بورد کپی می‌کند یک بار نصبش کنید تا همان خط‌کش پیکسلی را داشته باشید که کاربران Windows و Linux و ChromeOS اجرا می‌کنند و همان خط‌کش پیکسلی که کاربران Mac اجرا می‌کنند، چون این ابزار داخل مرورگر زندگی می‌کند نه در سیستم‌عامل. هیچ فایل دانلودی برای پیدا کردن لازم نیست، نه نصب‌کننده و نه دسترسی مدیر: افزونه با یک کلیک از Chrome Web Store می‌آید. در شروع کار یک خط‌کش پیکسلی رایگان است و همهٔ امکاناتش برای همه باز است. برنامهٔ خط‌کشی که در پنجرهٔ جدا باز می‌شود، به‌محض اسکرول شدن صفحه چیز اشتباهی را اندازه می‌گیرد. این خط‌کش پیکسلی داخل خود تب کشیده می‌شود و همراه محتوا اسکرول می‌شود. این یک خط‌کش پیکسلی آنلاین است: روی صفحهٔ زنده کار می‌کند، روی سرور تست، روی سایت مشتری، پشت صفحهٔ ورود. یک خط‌کش دسکتاپی که تصویر ثابتی از پنجره را اندازه می‌گیرد چنین کاری نمی‌تواند بکند. می‌خواهید یک تصویر یا لوگو را بررسی کنید؟ از آن برای اندازه‌گیری تصویر استفاده کنید — نشانگر را روی عکس ببرید و اندازهٔ نمایش‌داده‌شده‌اش را بخوانید که اغلب با اندازهٔ فایل اصلی یکی نیست. پرسش و پاسخ س: چطور بدون باز کردن DevTools پیکسل‌های روی صفحه را اندازه بگیریم؟ ج: روی آیکن کلیک کنید و بکشید. لایه روی صفحه می‌نشیند، پس دقیقاً همان چیزی را اندازه می‌گیرید که می‌بینید، از جمله حالت‌های hover که وقتی یک پنل فوکوس را می‌گیرد از بین می‌روند. س: خط‌کش صفحه، خط‌کش پیکسل، خط‌کش px، screen pixel ruler، px ruler، pixelruler — این کدام‌یک است؟ ج: همهٔ این‌ها. ابزار یکی است، فقط عبارت جست‌وجو فرق می‌کند. س: می‌تواند سانتی‌متر یا اینچ اندازه بگیرد؟ ج: نه. این یک ابزار خط‌کش پیکسلی است و فقط پیکسل CSS را گزارش می‌کند، همان واحدی که در استایل‌شیت می‌نویسید. س: همه‌جا کار می‌کند؟ ج: روی سایت‌های معمولی بله. صفحه‌های سیستمی Chrome، نمایشگر PDF داخلی و درون iframe های cross-origin روی هر افزونه‌ای بسته‌اند، از جمله همین یکی. س: چه داده‌ای جمع می‌کند؟ ج: هیچ. صفر درخواست شبکه، بدون حساب کاربری، بدون ثبت‌نام. موقع نصب هیچ دسترسی ترسناکی نمی‌خواهد و تنها بعد از کلیک شما به صفحه دست می‌زند. عادت‌های قدیمی کندتر و کم‌دقت‌ترند: گرفتن خط‌کش پلاستیکی روی شیشهٔ مانیتور یا شمردن پیکسل‌ها در اسکرین‌شات. خط‌کش مخصوص صفحهٔ کامپیوتر باید داخل مرورگر باشد، با هر تغییر چیدمان دوباره رسم شود و به همان واحدی حرف بزند که در کد می‌نویسید. کاری که این لایهٔ روی صفحه انجام می‌دهد همین است و به همین دلیل خط‌کش پیکسلی وب‌سایت از خط‌کش گذاشتن روی عکسی که در ویرایشگر گرافیکی چسبانده‌اید بهتر جواب می‌دهد. این صفحه به 52 زبان موجود است، پس یک خط‌کش پیکسلی وب در زبان شما فقط یک جست‌وجو فاصله دارد. نصبش کنید، در اولین صفحه‌ای که باز می‌کنید پیکسل‌ها را اندازه بگیرید و تا آخر روز خط‌کش روی صفحه را یک کلیک دورتر نگه دارید.