اسکرین رولر: بازرسی و اندازهگیری المانهای وب
فرانتاند
سئوخلاصهٔ کاملتر
اسکرین رولر یه افزونهی مرورگر کرومه که خودش رو ابزاری همهکاره برای اندازهگیری، بازرسی و ویرایش هر چیزی روی وب معرفی میکنه. مخاطبش توسعهدهندهها و طراحها هستن و به گفتهی سازنده بیشتر از ۶۰ هزار نفر ازش استفاده میکنن. ایدهی اصلی اینه که به جای باز کردن devtools و کلنجار رفتن باهاش، یه لایهی سادهتر روی صفحه بیاری که کارهای پرتکرار طراحی رو سریعتر انجام بدی.
بخش بازرسیش بهت box model یه المان (margin، border و padding) و ابعاد دقیقش رو نشون میده و میتونی CSS محاسبهشده یا سورس رو ببینی؛ حتی خروجی رو به شکل کلاسهای Tailwind هم میده. حالتهایی مثل X-Ray، شبکهی چیدمان (layout grid)، خطکش صفحه و بررسی breakpointها هم داره تا فاصلهها و ساختار صفحه رو چشمی بسنجی.
یه کار اصلی دیگهش استخراج داراییِ صفحهست. رنگها رو با فرمتهای HEX، RGB، HSL و HSB بهت میده، گرادیانها، استایلهای تایپوگرافی، سایهها (box shadow)، ترنزیشنها و فایلهای SVG رو بیرون میکشه. یه color picker هم داره که برداشتن رنگ از هر جای صفحه رو راحت میکنه.
فراتر از طراحی، یه سری بررسی کیفی هم انجام میده. مشکلات دسترسیپذیری رو بر اساس استاندارد WCAG پیدا میکنه — مثلاً وقتی نسبت کنتراست یه متن پایینتر از حد مجازه — مشکلات سئو مثل طولانی بودن تگ title یا description رو گوشزد میکنه، وزن صفحه و فناوریهای بهکاررفته (مثل React و Next.js و Tailwind) رو تشخیص میده و حتی پیشنمایش کارت شبکههای اجتماعی رو نشون میده.
قابلیت ویرایش هم داره: میتونی متن صفحه رو عوض کنی، المانها رو کپی، پیست یا حذف کنی و تغییرات رو undo و redo کنی — یه جور دفترچهی طراحی روی خودِ سایت واقعی. این تغییرها موقتیان و فقط تو مرورگر خودت دیده میشن، پس بیشتر برای آزمایش سریع ایده و اعتبارسنجی طراحی بهدرد میخوره تا تغییر واقعی سایت.
نکات کلیدی:
- افزونهی کروم برای بازرسی، اندازهگیری و ویرایش المانهای هر صفحهی وب
- نمایش box model، CSS محاسبهشده و خروجی معادل Tailwind
- استخراج رنگ، گرادیان، فونت، سایه و SVG از صفحه
- گزارش مشکلات دسترسیپذیری (WCAG)، سئو و وزن صفحه
- ویرایش موقت متن و استایل برای آزمایش سریع ایدهها
