CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
فواصل و شبکه‌های پیکسلی بی‌نقص را در هر صفحه وب اندازه‌گیری کنید.
Image from store
Description from store
دقت پیکسل، قهرمان خاموش طراحی عالی است. یک ناهماهنگی تک پیکسلی می‌تواند ریتم یک شبکه را بشکند، متن را خارج از مرکز نشان دهد، یا باعث شود کل یک جزء "تقریباً درست" به نظر برسد اما نه کاملاً. Grid Ruler Lite به توسعه‌دهندگان front-end، طراحان UI/UX، آزمایش‌کنندگان QA و هر کسی که به بهبود بصری اهمیت می‌دهد، یک جعبه ابزار اندازه‌گیری فوری در مرورگر ارائه می‌دهد - بدون نرم‌افزار طراحی سنگین، بدون پنل‌های DevTools شلوغ و بدون اسکرین‌شات‌هایی که در برنامه‌های خارجی جابجا می‌شوند. این افزونه با یک کلیک، یک خط‌کش قابل تغییر اندازه، راهنماهای snap-to-grid و شبکه‌های پایه اختیاری را در بالای هر صفحه وب قرار می‌دهد تا بتوانید فاصله را بررسی کنید، شبکه‌های ۸ نقطه‌ای را تأیید کنید و شواهدی از اشکالات طرح‌بندی را در عرض چند ثانیه ثبت کنید.
چه چیزی Grid Ruler Lite را متمایز می‌کند؟
فعال‌سازی با یک کلیک، لغو با یک کلیک
روی نماد نوار ابزار کلیک کنید (یا میانبری را که در تنظیمات صفحه کلید مرورگر تنظیم کرده‌اید، فراخوانی کنید) و افزونه یک رابط کاربری سبک را تزریق می‌کند.<canvas> لایه پوششی (overlay) در Shadow-DOM مخصوص به خود محصور شده است. CSS صفحه شما نمی‌تواند دخالت کند و لایه پوششی هرگز درخت DOM مورد آزمایش شما را تغییر نمی‌دهد. دوباره کلیک کنید و تمام راهنماها، شبکه‌ها و برچسب‌ها ناپدید می‌شوند - بدون بارگذاری مجدد صفحه، بدون شنونده‌های رویداد ماندگار.
چرا باید آن را در جعبه ابزار خود داشته باشید؟
صرفه‌جویی در زمان: اندازه‌گیری فاصله‌ها در DevTools نیازمند بررسی دقیق کادرهای تودرتو و اضافه کردن ذهنی مقادیر حاشیه و مرز است. Grid Ruler Lite فاصله‌ها را با یک حرکت به صورت بصری نشان می‌دهد.
کاهش اشکالات: رگرسیون‌های فاصله‌گذاری کوچک را قبل از رسیدن به مرحله‌ی تولید یا بدتر از آن، به مرحله‌ی تولید، به خصوص در نقاط شکست واکنش‌گرا که چشم‌های QA همیشه به آنها نمی‌رسند، شناسایی کنید.
بهبود همکاری: طراحان می‌توانند شبکه ۸ نقطه‌ای را مستقیماً روی یک نسخه پیاده‌سازی‌شده قرار دهند و یک اسکرین‌شات به اشتراک بگذارند و بدون نیاز به کامنت‌های فیگما، بازخورد پیکسلی دقیقی را در اختیار توسعه‌دهندگان قرار دهند.
متمرکز بمانید: نیازی به فشردن کلید alt و tab در فتوشاپ یا باز کردن فایل‌های Sketch فقط برای اندازه‌گیری یک دکمه نیست. همه چیز دقیقاً همانطور که کاربران نهایی آن را می‌بینند، در صفحه زنده اتفاق می‌افتد.
آموزش و مستندسازی: مدیران محصول و نویسندگان فنی می‌توانند رفتار طرح‌بندی را با اسکرین‌شات‌های خط‌کش نشان دهند و اسناد مشخصات را برای همه ذینفعان واضح‌تر کنند.
گروه‌های کاربری هدف
گروه کاربری
توسعه‌دهندگان فرانت‌اند
نیاز به تأیید فاصله‌گذاری CSS، شکاف‌های flexbox و ترازبندی اجزا در نقاط شکست دارید. خط‌کش‌ها را بکشید، به لبه‌ها ضربه بزنید، راهنماها را قفل کنید، تصاویر را برای بررسی‌های PR صادر کنید.
طراحان رابط کاربری/تجربه کاربری
باید تأیید شود که توسعه‌دهندگان از سیستم‌های طراحی ۸ یا ۱۰ نقطه‌ای پیروی می‌کنند. شبکه‌های پایه را روی هم قرار دهید، فاصله‌گذاری‌ها را اندازه‌گیری کنید، PNGهای حاشیه‌نویسی شده را به اشتراک بگذارید.
آزمایش‌کنندگان تضمین کیفیت
اشکالات پیکسل‌پروفکت را با شواهد واضح گزارش دهید
اندازه‌گیری‌های سریع و گرفتن اسکرین‌شات با یک کلید، مستقیماً به ردیاب‌های باگ می‌روند
ویراستاران محتوا و مدیران محتوا
بررسی پوشش تیتر، فاصله جایگاه تبلیغات و طرح‌بندی کارت‌ها در صفحات مبتنی بر CMS. همپوشانی غیر فنی از پیچیدگی DevTools جلوگیری می‌کند.
مربیان و دانشجویان
آموزش اصول طراحی، نظریه شبکه و طرح‌بندی‌های واکنش‌گرا به صورت زنده در مرورگر، نمایش‌های بصری و بلادرنگ بدون نیاز به ابزارهای خارجی