Chrome DevTools امکانات زیادی، از ویرایش آنلاین صفحات وب گرفته تا بررسی دقیق ریکوئست‌های HTTP یک صفحه به همراه جزئیات، را در اختیار کاربران قرار می‌دهد، اما جای قابلیتی برای آنالیز دقیق کدهای CSS در این جعبه‌ابزار خالی است که این هم به یمن افزونهٔ اپن‌سورسی تحت عنوان CSS Dig، پُر شده است.
CSS Dig این امکان را در اختیار دولوپرهای فرانت‌اند می‌گذارد تا در گوگل کروم به بررسی تمام سِلکتورها و اَتریبیوت‌ها موجود در CSS بپردازند. این افزونه رایگان بوده و امکانات بسیاری را به ویژه در اختیار دولوپرهای رابط کاربری سایت قرار می‌دهد.
پس از انتخاب یک فایل CSS در پنل‌کاربری CSS Dig، اطلاعات زیادی از جمله سِلکتورها، موارد تکراری و همچنین بخش‌های غیر‌ضروری و استفاده‌نشده برای دولوپر نشان داده می‌شوند. برای شروع استفاده از این افزونه، پس از نصب بر روی آیکان (d) آبی رنگ اضافه شده در قسمت بالا سمت راست گوگل‌کروم کلیک نموده و کدهای مورد نظر را از لیست انتخاب نمایید و سپس Start Digging را کلیک نمایید. در صفحهٔ نتایج، دو تب مجزا وجود دارد که عبارتند از:
- Properties: برای نمایش نتایج بر اساس مواردی نظیر از چه رنگ، بُردر، پَدینگ و فونت‌هایی و به چه تعداد در صفحه استفاده شده است.
- Selectors: برای نمایش نتایج بر اساس کلاس‌ها و آی‌دی‌های به کار رفته و اینکه برای هر کدام چه کدهایی با CSS نوشته شده است.
همچنین از این ابزار می‌توان برای مقاصد یادگیری و مهندسی معکوس کدهای موجود در صفحات وب نیز استفاده نمود و استایل‌های به کار رفته در صفحات وب‌سایت‌های مختلف را به همراه جزئیات‌شان، مورد بررسی قرار داد. به علاوه اینکه یکی از موارد پرکاربرد CSS Dig، برای کشف مواردی است که کدی بیش از یک بار برای قسمتی از صفحه نوشته شده و یا قوانین CSS نوشته شده با یکدیگر تداخل دارند.
CSS Dig دارای محیطی بسیار ساده است و برخلاف DevTools، دارای امکاناتی مشخص و یکپارچه می‌باشد؛ مواردی که برای دولوپرهای فرانت‌اند بسیار سودمند و مفید می‌باشند.
