CSS Inspector

چه در حال رفع یک مشکل چیدمان (layout) باشید، چه در حال مهندسی معکوس طراحی‌ای که تحسینش می‌کنید، یا صرفاً بخواهید مقادیر فاصله‌گذاری و تایپوگرافی را سریع بررسی کنید، ابزار CSS Inspector همه‌چیز را در یک پنل شناور و تمیز در اختیارتان می‌گذارد. برخلاف DevTools مرورگر، این ابزار سر راهتان نمی‌ماند — نه پنلی داکشده و نه تغییری در اندازه viewport. فقط کافیست هاور کنید، کلیک کنید و بررسی کنید. این ابزار استایل‌های محاسبه‌شده (computed styles) را نشان می‌دهد، یعنی چیزی که مرورگر واقعاً رندر می‌کند، نه صرفاً CSS نوشته‌شده. به این معنا که مقادیر واقعی را پس از اعمال ارث‌بری (inheritance)، specificity و کسکید (cascading) می‌بینید — همان مقادیری که روی چیزی که کاربران روی صفحه می‌بینند اثر می‌گذارند.

بررسی یک عنصر هرگز باعث reflow یا repaint شدن خود صفحه نمی‌شود، بنابراین می‌توانید بدون نگرانی از به‌هم‌خوردن موقعیت اسکرول، انیمیشن‌ها یا وضعیت JavaScript، آزادانه صفحه را کاوش کنید. شبه‌عنصرهایی مانند ::before و ::after هم پشتیبانی می‌شوند — روی والد هاور کنید تا پنل، استایل‌های محتوای تولیدشده (generated content) را جدا از استایل‌های خود عنصر نمایش دهد. ویژگی‌های سفارشی CSS (متغیرها) به مقدار نهایی محاسبه‌شده‌شان resolve می‌شوند، اما پنل نام متغیری که این مقدار را تولید کرده هم نشان می‌دهد، تا بتوانید یک رنگ یا مقدار فاصله‌گذاری را تا منبع design-token آن ردیابی کنید، نه اینکه فقط یک عدد پیکسلی خام ببینید.

در استفاده روزمره، بیشتر توسعه‌دهندگان در هر جلسه کاری، ده‌ها بار سراغ CSS Inspector می‌روند — برای بررسی اینکه چرا یک margin کولاپس شده، تأیید یک کد هگز پیش از کپی کردن در stylesheet، یا اطمینان از اینکه یک breakpoint در media query واقعاً استایل‌های موردنظر را اعمال کرده است. از آنجا که این ابزار یک پنل شناور است نه یک حالت سراسری در مرورگر، می‌توانید آن را باز نگه دارید در حالی که بین تب‌ها جابه‌جا می‌شوید تا ویرایشگر کد یا فایل طراحی خودتان را بررسی کنید، و سپس بدون از دست دادن موقعیت خود، مستقیماً به همان عنصری که روی آن هاور کرده بودید بازگردید.