Pixel Ruler

استخدم Pixel Ruler لقياس البكسل في أي صفحة ويب: مسطرة على الشاشة لأحجام العناصر والمسافات والحشو.

يضع Pixel Ruler مسطرة فوق الشاشة ويتيح لك قياس أي شيء داخل المتصفح. انقر على أيقونة شريط الأدوات، واسحب الفأرة فوق التخطيط، واقرأ المسافة الدقيقة بوحدات بكسل CSS. مرّر المؤشر فوق أي عنصر لتحصل على عرضه وارتفاعه والحشو الداخلي والمسافات إلى الكتل المحيطة به. الأرقام تطابق DevTools، لأن الإضافة تقرأ وحدات بكسل CSS نفسها التي يرسم بها المتصفح الصفحة. لا لوحة تفتحها، ولا لقطة شاشة تصدّرها، ولا حساب يدوي. مجرد مسطرة شاشة فوق الموقع الذي تنظر إليه أصلاً. طبقة واحدة، ولا شيء تتنقل بينه: 📏 اضغط واسحب لقياس المسافة بين أي نقطتين على الصفحة. 📏 وجّه المؤشر إلى عنصر لترى حجمه وحشوه والمسافات إلى العناصر المجاورة. 📏 أنزل أدلة رأسية وأفقية وحاذِ الكتل عليها. تبقى لديك دائماً مسطرة على الشاشة كمرجع، ومفتاح واحد ينسخ النتيجة إلى الحافظة مع محدّد CSS للعنصر الموجود تحت المؤشر. كيف تبدأ، في ثلاث خطوات: 1. ثبّت الإضافة وأضفها إلى شريط الأدوات. 2. افتح الصفحة التي تعمل عليها وانقر على الأيقونة. 3. اسحب، وجّه، قِس — واضغط Esc مرتين عند الانتهاء. يستخدمها مطورو الواجهات الأمامية لمطابقة التخطيط مع النموذج المصمم. ويستخدمها المصممون كمسطرة للصفحة عندما يكون ملف التسليم قد فات أوانه. ويسجّل مهندسو الجودة الخلل برقم حقيقي بدل عبارة «يبدو الزر منخفضاً قليلاً». وكل من يحتاج قياساً سريعاً بالبكسل على موقع يعمل فعلياً يحصل عليه بنقرتين. ما الذي تقدمه مسطرة الويب هذه: - المسافة بين أي نقطتين، بالبكسل - عرض وارتفاع أي عنصر في الصفحة - الحشو الداخلي والهوامش والفجوات بين العناصر المجاورة - المسافات من عنصر إلى الكتل المحيطة به - مساطر متدرجة على الحافتين العليا واليسرى من النافذة - الوسم والأصناف ومحدّد CSS للعنصر الذي قِسته - أدلة قابلة لإعادة الاستخدام للتحقق من المحاذاة التحكم بلوحة المفاتيح يبقي المؤشر ثابتاً: → Shift يثبّت القياس على المحور الأفقي أو الرأسي → مفاتيح الأسهم تحرّك النقطة الحالية بمقدار 1 px بالضبط → Esc يمسح القياس الحالي، والضغطة الثانية تعيد لك الصفحة → اختصار واحد ينسخ النتيجة إلى الحافظة ثبّتها مرة واحدة وستحصل على مسطرة البكسل نفسها التي يشغّلها مستخدمو Windows وLinux وChromeOS، والمسطرة نفسها التي يشغّلها مستخدمو Mac، لأن الأداة تعيش داخل المتصفح لا داخل نظام التشغيل. لا يوجد تنزيل لمسطرة بكسل تبحث عنه، ولا مثبّت برامج، ولا صلاحيات مسؤول: تصل الإضافة من Chrome Web Store بنقرة واحدة. وهي عند الإطلاق مسطرة بكسل مجانية، وكل الميزات متاحة للجميع. تطبيق مسطرة شاشة يفتح في نافذة منفصلة ينتهي به الأمر إلى قياس الشيء الخطأ بمجرد أن تتمرر الصفحة. أما تطبيق مسطرة البكسل هذا فيُرسم داخل التبويب نفسه ويتمرر مع المحتوى. هذه مسطرة بكسل على الإنترنت: تعمل على الصفحة الحية، وعلى خادم تجريبي، وعلى موقع عميل، وخلف تسجيل الدخول. ومسطرة البكسل المكتبية التي تقيس صورة ثابتة لنافذة لا تستطيع ذلك. هل تريد فحص رسم توضيحي أو شعار؟ استخدمها كمسطرة بكسل للصور — مرّر المؤشر فوق الصورة واقرأ حجمها المعروض، وهو غالباً ليس الحجم الموجود في الملف الأصلي. أسئلة وأجوبة س: كيف أقيس البكسل على الشاشة دون فتح DevTools؟ ج: انقر على الأيقونة واسحب. تجلس الطبقة فوق الصفحة، فتقيس ما تراه فعلاً، بما في ذلك حالات hover التي تختفي عندما تسحب لوحة ما التركيز. س: مسطرة بكسل الشاشة، مسطرة الشاشة بالبكسل، px ruler، pixelruler — أي واحدة منها هذه؟ ج: كلها. الأداة واحدة، وما يتغير هو عبارة البحث فقط. س: هل يمكنها القياس بالسنتيمتر أو البوصة؟ ج: لا. إنها أداة مسطرة بكسل ولا تعرض سوى وحدات بكسل CSS، وهي الوحدة التي تكتبها في ملف الأنماط. س: هل تعمل في كل مكان؟ ج: على المواقع العادية، نعم. أما صفحات نظام Chrome وعارض PDF المدمج وداخل iframe من مصدر مختلف فهي مغلقة أمام كل إضافة، وهذه منها. س: ما البيانات التي تجمعها؟ ج: لا شيء. صفر طلبات شبكة، ولا حساب، ولا تسجيل. لا تطلب أي إذن مقلق عند التثبيت، ولا تلمس أي صفحة إلا بعد أن تنقر على الأيقونة. العادات القديمة أبطأ وأقل دقة: إسناد مسطرة بلاستيكية إلى زجاج شاشة الحاسوب، أو عدّ البكسلات في لقطة شاشة. المسطرة المخصصة للعمل على شاشة الحاسوب يجب أن تعيش داخل المتصفح، وأن تُعاد رسمها عندما يتغير ترتيب التخطيط، وأن تتحدث الوحدات نفسها التي يتحدثها الكود. هذا بالضبط ما تفعله طبقة المسطرة هذه، ولهذا تتفوق مسطرة البكسل للمواقع على أي مسطرة لصور الشاشة الملصقة في محرر رسوميات. الوصف متاح بـ 52 لغة، فمسطرة البكسل على الويب على بُعد عملية بحث واحدة بلغتك. ثبّتها، وقِس البكسل في أول صفحة تفتحها، وأبقِ مسطرة الشاشة على بُعد نقرة واحدة لبقية اليوم.