CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
قم بقياس المسافات والشبكات بدقة بكسل على أي صفحة ويب.
Image from store
Description from store
دقة البكسل هي سرّ التصميم الرائع. قد يُفسد خطأ في محاذاة بكسل واحد إيقاع الشبكة، أو يُظهر النص خارج المركز، أو يُسبب ظهور مُكوّن كامل "شبه صحيح" ولكن ليس تمامًا. يُتيح Grid Ruler Lite لمطوري الواجهة الأمامية، ومصممي واجهة المستخدم/تجربة المستخدم، ومختبري ضمان الجودة، وأي شخص يُعنى بالتحسين البصري، مجموعة أدوات قياس فورية داخل المتصفح - بدون برامج تصميم ثقيلة، أو لوحات DevTools مُزدحمة، أو لقطات شاشة مُدمجة في تطبيقات خارجية. بنقرة واحدة، يُضيف الامتداد مسطرة قابلة لتغيير الحجم، وأدلة للتثبيت على الشبكة، وشبكات أساسية اختيارية أعلى أي صفحة ويب، لتتمكن من التحقق من المسافات، والتحقق من الشبكات ذات 8 نقاط، واكتشاف أخطاء التخطيط في ثوانٍ.
ما الذي يجعل Grid Ruler Lite مميزًا؟
التنشيط بنقرة واحدة، والإغلاق بنقرة واحدة
انقر فوق أيقونة شريط الأدوات (أو استدعِ الاختصار الذي قمت بتعيينه في إعدادات لوحة مفاتيح المتصفح) وسيقوم الامتداد بحقن ملف خفيف الوزن<canvas> طبقة مُغلَّفة داخل نموذج Shadow-DOM الخاص بها. لا يُمكن لـ CSS الخاص بصفحتك التداخل، ولا تُغيِّر الطبقة شجرة نموذج DOM التي تختبرها. انقر مرة أخرى، وستختفي جميع الأدلة والشبكات والعلامات - لا حاجة لإعادة تحميل الصفحة، ولا مُستمعي أحداث مُتأخِّرين.
لماذا ستحتاجه في مجموعة أدواتك
توفير الوقت: يتطلب قياس المسافات في أدوات التطوير البحث في المربعات المتداخلة وإضافة قيم الحدود والهوامش ذهنيًا. يُظهر Grid Ruler Lite المسافات بصريًا بسحبة واحدة.
تقليل الأخطاء: اكتشف الانحدارات الصغيرة في المسافات قبل أن تصل إلى مرحلة التجهيز أو الأسوأ من ذلك، مرحلة الإنتاج - خاصة في نقاط التوقف المستجيبة حيث لا تصل أعين ضمان الجودة دائمًا.
تحسين التعاون: يمكن للمصممين تراكب الشبكة المكونة من 8 نقاط مباشرة على إصدار تم نشره ومشاركة لقطة شاشة، مما يمنح المطورين ملاحظات دقيقة على البكسل دون تعليقات Figma.
ابقَ مُركّزًا: لا حاجة للضغط على Alt+Tab في فوتوشوب، ولا لفتح ملفات Sketch لقياس زرّ فقط. كل شيء يحدث على الصفحة الرئيسية، تمامًا كما يراه المستخدمون.
التثقيف والتوثيق: يمكن لمديري المنتجات والكتاب الفنيين توضيح سلوك التخطيط باستخدام لقطات شاشة المسطرة، مما يجعل مستندات المواصفات أكثر وضوحًا لجميع أصحاب المصلحة.
مجموعات المستخدمين المستهدفة
مجموعة المستخدمين
مطورو الواجهة الأمامية
يجب التحقق من تباعد CSS، وفجوات FlexBox، ومحاذاة المكونات عبر نقاط التوقف. اسحب المساطر، والتقاط الحواف، وقفل الأدلة، وتصدير لقطات الشاشة لمراجعات العلاقات العامة
مصممي واجهة المستخدم وتجربة المستخدم
يجب التأكد من أن إصدارات التطوير تحترم أنظمة التصميم المكونة من 8 أو 10 نقاط، وتراكب شبكات خط الأساس، وقياس الحشوات، ومشاركة ملفات PNG الموضحة
مختبرو ضمان الجودة
الإبلاغ عن الأخطاء الدقيقة مع أدلة واضحة
تنتقل القياسات السريعة والتقاط لقطة شاشة بضغطة زر واحدة مباشرة إلى متتبعات الأخطاء
محررو المحتوى ومديرو المشاريع
تحقق من التفاف العناوين، وتباعد فتحات الإعلانات، وتخطيطات البطاقات على الصفحات التي تعمل بنظام إدارة المحتوى. تتجنب الطبقة غير الفنية تعقيدات DevTools
المعلمون والطلاب
قم بتدريس مبادئ التصميم ونظرية الشبكة والتخطيطات المستجيبة مباشرة في المتصفح، وعروض توضيحية مرئية في الوقت الفعلي بدون أدوات خارجية