لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
آنالیز کدهای CSS وب­‌سایت با افزونهٔ CSS Dig گوگل کروم

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

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

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

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

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

در صفحهٔ نتایج، ۲ تب مجزا وجود دارد: Properties برای نمایش نتایج براساس مواردی نظیر از چه رنگ، بُردر، پَدینگ و فونت‌هایی و به چه تعداد در صفحه استفاده شده است و Selectors برای نمایش نتایج براساس کلاس‌ها و آی‌دی‌های به‌کار رفته و این‌که برای هرکدام چه کدهای CSS‌ای نوشته شده است.

از این ابزار همچنین می‌توان برای مقاصد یادگیری و کسب تجربه و مهندسی معکوس صفحات استفاده نمود و استایل‌های به کار رفته در صفحات سایر وب‌سایت‌ها را به‌همراه جزئیات مورد بررسی قرار داد.

یکی از موارد پرکاربرد CSS Dig، برای کشف مواردی است که یک کد بیش از یک بار برای قسمتی از صفحه نوشته شده و یا قوانین CSS نوشته شده با یکدیگر تداخل دارند یا خیر (مواردی نظیر رنگ‌ها، فونت‌ها و غیره).

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

منبع


علی فلاحی