CSS Inspector

سواء كنت تعمل على تصحيح مشكلة في التخطيط، أو تحاول فك تشفير تصميم أعجبك لمعرفة كيفية بنائه، أو تريد فقط التحقق سريعًا من قيم المسافات والخطوط، تمنحك أداة CSS Inspector كل ما تحتاجه في لوحة عائمة أنيقة. وعلى عكس أدوات DevTools الخاصة بالمتصفح، فإنها لا تعيق عملك أبدًا — لا لوحات مثبتة، ولا تغيير في حجم نافذة العرض. كل ما عليك هو التمرير بالماوس والنقر والفحص. تعرض الأداة الأنماط المحسوبة (Computed Styles) - أي ما يعرضه المتصفح فعليًا على الشاشة - وليس فقط كود CSS كما كتبه المطور. هذا يعني أنك ترى القيم الحقيقية بعد حل مسائل الوراثة (Inheritance) والخصوصية (Specificity) والتتالي (Cascading) - وهي نفس القيم التي تؤثر على ما يراه المستخدمون على الشاشة.

لا يؤدي فحص أي عنصر أبدًا إلى إعادة تدفق (Reflow) أو إعادة رسم (Repaint) للصفحة نفسها، لذا يمكنك الاستكشاف بحرية دون القلق بشأن الإخلال بموضع التمرير أو الحركات المتحركة (Animations) أو حالة JavaScript. كما تدعم الأداة العناصر الوهمية (Pseudo-elements) مثل ::before و::after - فقط مرر الماوس فوق العنصر الأب لترى اللوحة تعرض أنماط المحتوى المُولّد بشكل منفصل عن أنماط العنصر نفسه. يتم حل خصائص CSS المخصصة (المتغيرات) إلى قيمتها المحسوبة النهائية، لكن اللوحة تعرض لك أيضًا اسم المتغير الذي أنتج هذه القيمة، بحيث يمكنك تتبع أي لون أو قيمة تباعد إلى مصدرها من رموز التصميم (Design Tokens) بدلاً من رؤية رقم بكسل خام فقط.

في الاستخدام اليومي، يلجأ معظم المطورين إلى أداة CSS Inspector عشرات المرات في الجلسة الواحدة - سواء للتحقق من سبب انهيار هامش (Margin)، أو للتأكد من رمز اللون السداسي عشري (Hex) قبل نسخه إلى ملف الأنماط، أو للتحقق من أن نقطة توقف استعلام الوسائط (Media Query) قد طبّقت بالفعل الأنماط المطلوبة. ولأنها لوحة عائمة وليست وضعًا يشمل المتصفح بأكمله، يمكنك إبقاءها مفتوحة أثناء التنقل بين علامات التبويب للتحقق من محرر الأكواد الخاص بك أو ملف التصميم، ثم العودة مباشرة إلى نفس العنصر الذي كنت تمرر الماوس فوقه دون أن تفقد موضعك.