آنالیز کدهای CSS وب­‌سایت با افزونهٔ CSS Dig گوگل کروم

آنالیز کدهای CSS وب­‌سایت با افزونهٔ CSS Dig گوگل کروم

جعبه‌ابزار ویژهٔ دولوپرها در گوگل‌کروم (Chrome DevTools) امکانات زیادی از ویرایش آنلاین صفحات وب تا بررسی دقیق ریکوئست‌های HTTP یک صفحه به همراه جزئیات را در اختیار کاربران قرار می‌دهد، اما جای قابلیتی برای آنالیز دقیق کدهای CSS و قوانین آن در این جعبه‌ابزار خالی است که این جای خالی هم به لطف افزونهٔ اپن‌سورس CSS Dig پر شده است.

CSS Dig این امکان را در اختیار دولوپرهای فرانت‌اند می‌گذارد تا در گوگل کروم به‌ بررسی تمام سلکتورها، اتریبیوت‌ها و خصوصیات منحصربفرد موجود در CSS بپردازند؛ این افزونه رایگان بوده و امکانات بسیاری را به‌ویژه در اختیار دولوپرهای رابط کاربری سایت قرار می‌دهد.

پس از انتخاب یک فایل CSS در پنل‌کاربری CSS Dig، اطلاعات زیادی از جمله سلکتورها، موارد تکراری و همچنین بخش‌های غیر‌ضروری و استفاده‌نشده برای دولوپر نشان داده می‌شوند.

برای شروع استفاده از این افزونه، پس از نصب بر روی آیکان (d) آبی‌ رنگ اضافه شده در قسمت بالا سمت راست (محل قرارگیری پیش‌فرض) گوگل‌کروم کلیک نموده و CSS‌های موردنظر را از لیست انتخاب نموده، سپس Start Digging را کلیک نمایید.

 

خواندن ادامه مطالب در sokanacademy.com

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *