تصحيح أخطاء CSS: إتقان أدوات المطورين

مقدمة في تصحيح أخطاء CSS باستخدام أدوات المطورين

كل مطور CSS، من المبتدئين إلى المحترفين المخضرمين، يواجه أخطاء في التنسيق. العناصر ترفض المحاذاة، والألوان تظهر خاطئة، والتخطيطات تنكسر عند أحجام شاشة معينة، وحالات التحويم تتصرف بشكل غير متوقع. الفرق بين المعاناة لساعات وإصلاح المشكلات في دقائق يعود إلى مهارة واحدة: إتقان أدوات المطورين (DevTools) في متصفحك. أدوات المطورين مدمجة مباشرة في كل متصفح حديث، وتوفر مجموعة قوية من إمكانيات الفحص والتحرير والتصحيح التي تتيح لك رؤية ما يفعله المتصفح بالضبط مع CSS الخاص بك ولماذا.

في هذا الدرس، ستتعلم كيفية استخدام أدوات المطورين عبر Chrome و Firefox و Safari لفحص العناصر، وتحرير الأنماط في الوقت الفعلي، وتصحيح تعارضات الخصوصية، وتصور نموذج الصندوق، وتصحيح تخطيطات Flexbox و Grid، وتحليل الرسوم المتحركة، والعثور على CSS غير المستخدم، واختبار التصاميم المتجاوبة، وتطوير نهج منظم لحل أي خطأ CSS تواجهه. ستسرع هذه المهارات بشكل كبير سير عمل التطوير الخاص بك وتعمق فهمك لكيفية عمل CSS فعليًا في المتصفح.

فتح أدوات المطورين والتنقل فيها

قبل أن تتمكن من تصحيح أي شيء، تحتاج إلى معرفة كيفية فتح أدوات المطورين والتنقل بين لوحاتها. يوفر كل متصفح رئيسي طرقًا متعددة للوصول إلى أدوات المطورين الخاصة به.

أدوات Chrome DevTools

يوفر Chrome بيئة أدوات المطورين الأكثر استخدامًا. يمكنك فتحها بعدة طرق حسب ما تريد القيام به فور الفتح.

/* اختصارات لوحة المفاتيح (Windows/Linux) */
F12                        /* فتح DevTools (آخر لوحة مستخدمة) */
Ctrl + Shift + I           /* فتح DevTools (آخر لوحة مستخدمة) */
Ctrl + Shift + C           /* فتح DevTools + تفعيل أداة اختيار العناصر */
Ctrl + Shift + J           /* فتح DevTools على لوحة Console */

/* اختصارات لوحة المفاتيح (macOS) */
Cmd + Option + I           /* فتح DevTools (آخر لوحة مستخدمة) */
Cmd + Option + C           /* فتح DevTools + أداة اختيار العناصر */
Cmd + Option + J           /* فتح DevTools على لوحة Console */

/* طريقة النقر بزر الفأرة الأيمن */
/* انقر بزر الفأرة الأيمن على أي عنصر في الصفحة > "فحص" */
/* هذا يفتح DevTools مع تحديد ذلك العنصر */

أدوات Firefox DevTools

تقدم أدوات Firefox تجربة ممتازة لتصحيح أخطاء CSS مع بعض الميزات الفريدة غير الموجودة في المتصفحات الأخرى، بما في ذلك مفتش Flexbox متفوق ولوحة خطوط مخصصة.

/* اختصارات لوحة المفاتيح (Windows/Linux) */
F12                        /* فتح DevTools */
Ctrl + Shift + I           /* فتح DevTools */
Ctrl + Shift + C           /* فتح DevTools + أداة اختيار العناصر */

/* اختصارات لوحة المفاتيح (macOS) */
Cmd + Option + I           /* فتح DevTools */
Cmd + Option + C           /* فتح DevTools + أداة اختيار العناصر */

/* طريقة القائمة */
/* القائمة > أدوات إضافية > أدوات مطوري الويب */

أدوات Safari DevTools

يتطلب Safari تفعيل قائمة التطوير قبل أن تتمكن من الوصول إلى أدوات المطورين. هذه خطوة إعداد لمرة واحدة ينساها كثير من المطورين.

/* أولاً، فعّل قائمة التطوير (مرة واحدة فقط): */
/* Safari > الإعدادات > متقدم > حدد "إظهار ميزات لمطوري الويب" */

/* ثم افتح DevTools: */
Cmd + Option + I           /* فتح Web Inspector */
Cmd + Option + C           /* فتح Web Inspector + أداة اختيار العناصر */

/* أو انقر بزر الفأرة الأيمن على أي عنصر > "فحص العنصر" */

لوحة العناصر/المفتش: عرض وتحرير الأنماط مباشرة

لوحة العناصر (تسمى "المفتش" في Firefox) هي الأداة الأساسية لتصحيح أخطاء CSS. تعرض شجرة DOM على جانب والأنماط المطبقة على العنصر المحدد على الجانب الآخر. هذا هو المكان الذي ستقضي فيه معظم وقت التصحيح.

تحديد العناصر

هناك طرق متعددة لتحديد عنصر للفحص. أداة اختيار العناصر (أيقونة المؤشر في أعلى يسار DevTools) تتيح لك التحويم فوق الصفحة والنقر لتحديد عنصر. يمكنك أيضًا النقر مباشرة على العقد في شجرة DOM، أو استخدام وظيفة البحث للعثور على العناصر بالمحدد أو محتوى النص أو XPath.

/* تفعيل أداة اختيار العناصر */
Ctrl + Shift + C (Windows/Linux)
Cmd + Shift + C (macOS)

/* البحث في شجرة DOM */
Ctrl + F (Windows/Linux) أثناء وجودك في لوحة العناصر
Cmd + F (macOS) أثناء وجودك في لوحة العناصر
/* يمكنك البحث بـ:
   - اسم الوسم: div, section, .my-class
   - محدد CSS: .container > .card:first-child
   - محتوى نصي: "مرحبا بالعالم"
   - XPath: //div[@class="card"]
*/

/* التنقل في شجرة DOM */
سهم لأعلى/لأسفل           /* التنقل بين العقد الشقيقة */
سهم لليمين                 /* توسيع عقدة مطوية */
سهم لليسار                 /* طي عقدة موسعة */

تحرير الأنماط في الوقت الفعلي

تعرض لوحة الأنماط على الجانب الأيمن من لوحة العناصر جميع قواعد CSS المطبقة على العنصر المحدد، مرتبة حسب الخصوصية (الأعلى خصوصية في الأعلى). يمكنك النقر على أي قيمة خاصية لتحريرها، وتبديل القواعد تشغيلًا وإيقافًا باستخدام مربعات الاختيار، وإضافة خصائص أو قواعد جديدة بالكامل. تُطبق جميع التغييرات فوريًا على الصفحة، مما يجعلها طريقة سريعة بشكل لا يصدق للتجربة مع الأنماط.

/* انقر على قيمة لتحريرها */
/* مثال: انقر على "16px" بجانب font-size واكتب "20px" */

/* تبديل خاصية تشغيل/إيقاف */
/* مرر فوق خاصية وانقر على مربع الاختيار الذي يظهر */

/* إضافة خاصية جديدة لقاعدة موجودة */
/* انقر على المنطقة الفارغة داخل كتلة القاعدة وابدأ الكتابة */

/* إضافة قاعدة CSS جديدة */
/* انقر على زر "+" أعلى لوحة الأنماط */
/* تُنشأ قاعدة جديدة بمحدد العنصر المحدد */

/* زيادة/إنقاص القيم الرقمية */
سهم لأعلى/لأسفل            /* تغيير بمقدار 1 */
Shift + أعلى/أسفل          /* تغيير بمقدار 10 */
Alt + أعلى/أسفل            /* تغيير بمقدار 0.1 */
Ctrl + أعلى/أسفل (Win)     /* تغيير بمقدار 100 */
Cmd + أعلى/أسفل (Mac)      /* تغيير بمقدار 100 */

لوحة الأنماط المحسوبة

بينما تعرض لوحة الأنماط قواعد CSS كما كتبتها، تعرض لوحة Computed القيم النهائية المحلولة بعد تطبيق جميع حسابات التتالي والوراثة والخصوصية. هذا ضروري عندما تحتاج لمعرفة القيمة الفعلية المستخدمة من المتصفح، وليس فقط ما تم التصريح به.

على سبيل المثال، إذا حددت font-size: 1.5em على عنصر، تعرض لوحة الأنماط 1.5em، لكن لوحة Computed تعرض قيمة البكسل المحلولة (مثل 24px إذا كان حجم خط الأب 16px). تعرض لوحة Computed أيضًا الخصائص الموروثة، مما يسمح لك بتتبع مصدر القيمة الأصلي في تسلسل التتالي.

في Chrome، انقر على علامة التبويب "Computed" بجانب "Styles". يمكنك تصفية الخصائص المحسوبة باستخدام مربع البحث وتبديل "عرض الكل" لرؤية كل خاصية (بما فيها افتراضيات المتصفح) أو فقط تلك ذات القيم المحددة صراحة. النقر على أيقونة السهم بجانب أي قيمة محسوبة ينقلك مباشرة إلى قاعدة المصدر في لوحة الأنماط المسؤولة عن تلك القيمة.

تصور نموذج الصندوق

مخطط نموذج الصندوق هو واحد من أكثر أدوات التصحيح المرئية فائدة. يظهر في أعلى لوحة Computed (ويمكن أيضًا العثور عليه أسفل لوحة الأنماط في بعض المتصفحات). يُظهر المخطط منطقة المحتوى والحشو والحد والهامش للعنصر المحدد كسلسلة من المستطيلات الملونة المتداخلة، مع عرض قيم البكسل الدقيقة لكل جانب.

عند التحويم فوق أي من المناطق الأربع (المحتوى، الحشو، الحد، الهامش)، يتم تسليط الضوء على المنطقة المقابلة مباشرة على الصفحة. يمكنك أيضًا النقر على أي قيمة في مخطط نموذج الصندوق لتحريرها مباشرة، وهو مفيد للتجريب السريع مع تعديلات المسافات.

فرض حالات العناصر: :hover و :focus و :active

كثير من أخطاء CSS تظهر فقط أثناء الحالات التفاعلية التي يصعب فحصها لأن الحالة تختفي عند تحريك الفأرة إلى DevTools. لحسن الحظ، تسمح لك أدوات المطورين بفرض حالات الفئات الزائفة على أي عنصر، مع الحفاظ على الحالة مطبقة حتى أثناء فحص الأنماط.

/* Chrome: */
/* 1. حدد العنصر في لوحة العناصر */
/* 2. انقر على زر ":hov" فوق لوحة الأنماط */
/* 3. حدد المربعات لـ :hover, :active, :focus, :focus-within, :focus-visible, :target, :visited */

/* Firefox: */
/* 1. انقر بزر الفأرة الأيمن على العنصر في لوحة المفتش */
/* 2. اختر "تغيير الفئة الزائفة" من قائمة السياق */
/* 3. حدد الحالة(الحالات) المطلوبة */

/* Safari: */
/* 1. حدد العنصر في لوحة العناصر */
/* 2. في لوحة الأنماط، انقر على الأيقونة التي تشبه مؤشرًا بخطوط منقطة */
/* 3. بدّل حالات الفئة الزائفة المطلوبة */

/* جميع المتصفحات تدعم أيضًا فرض الحالات عبر النقر بزر الفأرة الأيمن: */
/* انقر بزر الفأرة الأيمن على عقدة العنصر > فرض الحالة > اختر الحالة */

هذه الميزة لا غنى عنها عند تصحيح القوائم المنسدلة وتلميحات الأدوات وحالات تحويم الأزرار وحدود التركيز لإمكانية الوصول وأي تنسيق تفاعلي آخر. يمكنك حتى فرض حالات متعددة في وقت واحد -- على سبيل المثال، فرض كل من :hover و :focus في نفس الوقت لتصحيح أنماط التنقل بلوحة المفاتيح التي تُطبق عند انتقال المستخدم بالتبويب إلى عنصر محوّم عليه.

معرفة أي قاعدة تفوز: تصحيح الخصوصية

واحدة من أكثر الإحباطات شيوعًا في CSS هي عندما لا يُطبق نمط كتبته لأن قاعدة أخرى ذات خصوصية أعلى تتجاوزه. تجعل أدوات المطورين هذا سهل التشخيص من خلال عرض جميع القواعد التي تستهدف العنصر المحدد، مرتبة حسب الخصوصية، مع الإشارة بصريًا إلى القواعد المتجاوَزة.

فهم الأنماط المشطوبة

في لوحة الأنماط، عندما يتم تجاوز خاصية بقاعدة أخرى ذات خصوصية أعلى (أو نفس الخصوصية لكن موقع لاحق في ترتيب المصدر)، يُعرض التصريح المتجاوَز بخط يتوسطه (خط عبر النص). هذا يخبرك فورًا أن القيمة لا تُطبَّق.

/* ما تراه في لوحة الأنماط (الأعلى = الأعلى أولوية): */

/* الأنماط المضمنة (أعلى خصوصية) */
element.style {
    color: red;                    /* هذا يفوز */
}

/* محدد المعرف: خصوصية (1, 0, 0) */
#main-heading {
    color: blue;                   /* مشطوب -- متجاوَز بالمضمن */
    font-size: 24px;               /* هذا يُطبَّق (لا تعارض) */
}

/* محدد الفئة: خصوصية (0, 1, 0) */
.heading {
    color: green;                  /* مشطوب -- متجاوَز بـ #main-heading */
    font-size: 20px;               /* مشطوب -- متجاوَز بـ #main-heading */
    margin-bottom: 16px;           /* هذا يُطبَّق (لا تعارض) */
}

/* محدد العنصر: خصوصية (0, 0, 1) */
h1 {
    color: black;                  /* مشطوب */
    font-size: 32px;               /* مشطوب */
    margin-bottom: 20px;           /* مشطوب */
    font-weight: bold;             /* هذا يُطبَّق (لا تعارض أعلاه) */
}

/* ورقة أنماط وكيل المستخدم (افتراضيات المتصفح، أدنى أولوية) */
h1 {
    display: block;                /* هذا يُطبَّق (لا تعارض أعلاه) */
    margin-block-start: 0.67em;    /* مشطوب -- متجاوَز بـ .heading */
}

منتقي الألوان ومدقق التباين

تتضمن أدوات المطورين منتقي ألوان مدمجًا قويًا يظهر عند النقر على أي عينة لون في لوحة الأنماط. يسمح لك منتقي الألوان باختيار الألوان بصريًا، والتبديل بين تنسيقات الألوان (hex, RGB, HSL, HWB)، واختيار ألوان من الصفحة باستخدام أداة القطارة، والوصول إلى لوحات الألوان المحفوظة.

ربما أكثر ميزة مفيدة في منتقي الألوان لتطوير الويب الحديث هي مدقق نسبة التباين. عند النقر على خاصية لون المقدمة (مثل color)، يعرض منتقي الألوان نسبة التباين بين ذلك اللون وخلفية العنصر. يُظهر ما إذا كان التباين يلبي معايير الوصول WCAG AA (الحد الأدنى 4.5:1 للنص العادي، 3:1 للنص الكبير) و AAA (7:1 للنص العادي، 4.5:1 للنص الكبير). يشير خطان منحنيان على تدرج الألوان إلى حدود التوافق مع AA و AAA، مما يسهل اختيار لون يلبي متطلبات إمكانية الوصول.

/* في لوحة الأنماط، انقر على أي عينة لون (المربع الملون الصغير) */
/* يُفتح منتقي الألوان مع: */

/* 1. منطقة تدرج الألوان -- انقر/اسحب لاختيار لون */
/* 2. شريط درجة اللون -- اختر درجة اللون الأساسية */
/* 3. شريط الشفافية -- اضبط الشفافية */
/* 4. مبدل التنسيق -- انقر على قيمة اللون للتبديل بين: */
/*    hex (#ff0000), rgb(255, 0, 0), hsl(0, 100%, 50%), hwb(0 0% 0%) */
/* 5. أداة القطارة -- اختر أي لون من الصفحة */
/* 6. قسم نسبة التباين -- يعرض النسبة والتوافق مع WCAG */
/* 7. لوحات الألوان -- الوصول لألوان الصفحة أو Material Design أو مخصصة */

/* اختصار القطارة في Chrome: */
/* انقر على أيقونة القطارة في منتقي الألوان، ثم انقر في أي مكان على الصفحة */

لوحة التخطيط: تصحيح Flexbox و Grid

يمكن أن تكون تخطيطات CSS الحديثة باستخدام Flexbox و Grid صعبة التصحيح لأن العلاقات بين الحاويات والعناصر ليست دائمًا مرئية. توفر أدوات المطورين طبقات متراكبة ومفتشين متخصصين يجعلون نماذج التخطيط هذه مرئية وتفاعلية.

طبقة Flexbox والمفتش

عند تحديد عنصر مع display: flex أو display: inline-flex، تُبرزه أدوات المطورين بشارة خاصة في شجرة DOM (مكتوب "flex" في Chrome، أيقونة Flexbox صغيرة في Firefox). النقر على هذه الشارة يُبدّل طبقة مرئية على الصفحة تُظهر محاور الحاوية المرنة واتجاه العناصر المرنة وتوزيع المساحة الحرة.

/* في Chrome: */
/* 1. حدد حاوية flex في لوحة العناصر */
/* 2. انقر على شارة "flex" بجانب وسم العنصر */
/* 3. الطبقة المتراكبة تُظهر:
      - اتجاه المحور الرئيسي (سهم)
      - المحور المتقاطع
      - حدود العناصر
      - توزيع المساحة الحرة
*/

/* في Firefox (مفتش Flexbox أكثر تقدمًا): */
/* 1. حدد حاوية flex في لوحة المفتش */
/* 2. انقر على شارة "flex" أو اذهب إلى لوحة التخطيط */
/* 3. Firefox يُظهر:
      - مخططًا مصغرًا لتخطيط flex
      - حجم كل عنصر الأساسي ومرونته وحجمه النهائي
      - سبب كون كل عنصر بحجمه الحالي
      - ما إذا كانت العناصر قد نمت أو تقلصت أو تم تقييدها بـ min/max
*/

/* مشاكل Flexbox الشائعة للبحث عنها: */
/* - العناصر لا تلتف: تحقق من flex-wrap */
/* - أحجام عناصر غير متوقعة: تحقق من flex-grow, flex-shrink, flex-basis */
/* - مشاكل محاذاة: تحقق من align-items, justify-content على الحاوية */
/* - العناصر تتجاوز: تحقق من min-width (الافتراضي auto لعناصر flex) */
.fix-overflow {
    min-width: 0;  /* السماح لعنصر flex بالتقلص أسفل حجم المحتوى */
}

طبقة Grid والمفتش

تصحيح CSS Grid هو حيث تتألق أدوات المطورين حقًا. طبقة Grid ترسم خطوطًا مرئية ومسارات ومناطق وفجوات مباشرة فوق صفحتك، محولة بنية الشبكة غير المرئية إلى مخطط واضح.

/* في Chrome: */
/* 1. حدد حاوية grid في لوحة العناصر */
/* 2. انقر على شارة "grid" بجانب وسم العنصر */
/* 3. خصص الطبقة المتراكبة في لوحة التخطيط:
      - إظهار أحجام المسارات (عرض العرض/الارتفاع المحسوب لكل مسار)
      - إظهار أسماء المناطق (عرض مناطق الشبكة المسماة)
      - إظهار أرقام الخطوط (عرض أرقام خطوط الشبكة)
      - إظهار أسماء الخطوط (عرض خطوط الشبكة المسماة)
      - تمديد خطوط الشبكة (تمديد الخطوط إلى حافة نافذة العرض)
      - اختيار ألوان الطبقة المتراكبة لشبكات متعددة
*/

/* في Firefox (مفتش Grid ممتاز): */
/* 1. انقر على شارة "grid" في لوحة المفتش */
/* 2. أو استخدم لوحة التخطيط لتبديل طبقات grid المتراكبة */
/* 3. Firefox يُظهر:
      - خطوط الشبكة مع أرقام الخطوط
      - مناطق الشبكة المسماة مع التسميات
      - أحجام المسارات (fr, px, auto, إلخ)
      - الفجوات بين المسارات
      - مسارات الشبكة الضمنية مقابل الصريحة
      - طبقات شبكة متراكبة متعددة في وقت واحد
*/

/* مشاكل Grid الشائعة للتصحيح مع الطبقة المتراكبة: */
/* - العناصر في خلايا خاطئة: تحقق من أرقام خطوط الشبكة */
/* - فجوات غير متوقعة: تحقق من gap, row-gap, column-gap */
/* - العناصر تمتد عبر مسارات خاطئة: تحقق من grid-column, grid-row */
/* - ظهور صفوف/أعمدة شبكة ضمنية: تحقق من grid-auto-rows/columns */
/* - المناطق المسماة لا تعمل: تحقق من صيغة grid-template-areas */

لوحة الرسوم المتحركة

تلتقط لوحة الرسوم المتحركة وتعرض جميع رسوم CSS المتحركة والانتقالات التي تعمل على الصفحة. هذا لا يقدر بثمن لتصحيح مشاكل التوقيت وفهم الرسوم المتحركة المعقدة متعددة الخطوات وضبط منحنيات الرسوم المتحركة.

/* في Chrome: */
/* 1. افتح DevTools > أدوات إضافية > الرسوم المتحركة */
/* 2. شغّل رسمًا متحركًا على الصفحة (مرر فوق عنصر، إلخ) */
/* 3. لوحة الرسوم المتحركة تلتقط الرسم المتحرك وتعرض:
      - خط زمني لجميع الرسوم المتحركة الجارية
      - المدة والتأخير لكل رسم متحرك
      - منحنى التسهيل (انقر للتحرير بمحرر منحنى بصري)
      - مواقع الإطارات الرئيسية على الخط الزمني
      - القدرة على التمرير عبر الرسم المتحرك إطارًا بإطار
      - عناصر التحكم في سرعة التشغيل (25%، 50%، 100%)
*/

/* في Firefox: */
/* 1. حدد العنصر المتحرك في المفتش */
/* 2. قسم الرسوم المتحركة يظهر في الشريط الجانبي */
/* 3. يعرض خطًا زمنيًا للرسوم المتحركة النشطة مع التمرير */

/* نصائح التصحيح: */
/* - أبطئ الرسوم المتحركة إلى سرعة 25% لاكتشاف المشاكل */
/* - مرر الخط الزمني لتجميد الرسوم المتحركة عند إطارات محددة */
/* - حرر دوال التوقيت بصريًا مع محرر المنحنى */
/* - تحقق مما إذا كانت الرسوم المتحركة تستخدم خصائص مسرّعة بـ GPU */

علامة تبويب التغطية: العثور على CSS غير المستخدم

مع نمو المواقع، تتراكم ملفات CSS بقواعد لم تعد مستخدمة من أي عنصر على الصفحة الحالية. تقيس علامة تبويب التغطية في Chrome DevTools مقدار CSS (و JavaScript) المستخدم فعليًا، مما يساعدك على تحديد الكود الميت الذي يمكن إزالته لتحسين أداء تحميل الصفحة.

/* في Chrome: */
/* 1. افتح DevTools */
/* 2. اضغط Ctrl+Shift+P (Cmd+Shift+P على Mac) لفتح قائمة الأوامر */
/* 3. اكتب "coverage" واختر "Show Coverage" */
/* 4. انقر على زر إعادة التحميل في لوحة التغطية */
/* 5. اللوحة تُظهر:
      - كل ملف CSS (و JS) محمّل على الصفحة
      - إجمالي البايتات ونسبة البايتات غير المستخدمة
      - شريط ملون: أخضر = مستخدم، أحمر = غير مستخدم
      - انقر على ملف لرؤية الاستخدام سطرًا بسطر
        (أشرطة حمراء في الهامش تشير إلى قواعد غير مستخدمة)
*/

/* اعتبارات مهمة: */
/* - التغطية تقيس حالة الصفحة الحالية فقط */
/* - قواعد CSS المستخدمة فقط عند التحويم أو التركيز أو حالات أخرى */
/*   قد تظهر كـ "غير مستخدمة" إذا لم يتم تفعيل تلك الحالات */
/* - القواعد المستخدمة فقط في صفحات أخرى من موقعك ستظهر كغير مستخدمة */
/* - استخدم هذا كدليل وليس مقياسًا مطلقًا */
/* - فكر في CSS الحرج: ضع CSS فوق الطية مباشرة وحمّل الباقي كسولًا */

وضع التصميم المتجاوب

يتيح لك وضع التصميم المتجاوب (وضع الجهاز في Chrome) محاكاة أحجام شاشات مختلفة ونسب بكسل وأجهزة مباشرة في متصفحك دون الحاجة إلى أجهزة فعلية. هذا ضروري لتصحيح استعلامات الوسائط وضمان تكيف تصاميمك بشكل صحيح عبر نوافذ العرض.

/* في Chrome (وضع الجهاز): */
Ctrl + Shift + M (Windows/Linux)
Cmd + Shift + M (macOS)
/* أو انقر على أيقونة الجهاز في شريط أدوات DevTools */

/* الميزات: */
/* - اسحب مقابض نافذة العرض لتغيير الحجم بحرية */
/* - اختر من أبعاد أجهزة محددة مسبقًا (iPhone, iPad, Pixel, إلخ) */
/* - حدد أبعادًا مخصصة بكتابة قيم دقيقة */
/* - محاكاة نسبة بكسل الجهاز (DPR) لاختبار ريتينا */
/* - خنق سرعة الشبكة لمحاكاة الاتصالات البطيئة */
/* - خنق المعالج لمحاكاة الأجهزة الأبطأ */
/* - التقاط لقطات شاشة كاملة للصفحة */

/* في Firefox (وضع التصميم المتجاوب): */
Ctrl + Shift + M (Windows/Linux)
Cmd + Option + M (macOS)
/* ميزات مشابهة لـ Chrome بالإضافة إلى محاكاة أحداث اللمس */

/* في Safari (وضع التصميم المتجاوب): */
Ctrl + Cmd + R
/* ادخل وضع التصميم المتجاوب من قائمة التطوير */

تصحيح استعلامات الوسائط

تعرض أدوات Chrome DevTools تمثيلًا مرئيًا لجميع نقاط توقف استعلامات الوسائط المحددة في CSS الخاص بك. في وضع الجهاز، انقر على قائمة النقاط الثلاث أعلى نافذة العرض واختر "إظهار استعلامات الوسائط". تظهر أشرطة ملونة فوق نافذة العرض، كل منها يمثل نطاق استعلام وسائط. انقر على أي شريط لتغيير حجم نافذة العرض فورًا إلى نقطة التوقف تلك. هذا يسهل القفز بين نقاط التوقف ورؤية أين تحدث تغييرات التخطيط بالضبط.

/* شريط استعلامات الوسائط المرئي (وضع جهاز Chrome): */
/* أشرطة زرقاء = استعلامات max-width */
/* أشرطة برتقالية = استعلامات min-width */
/* أشرطة خضراء = استعلامات min-width و max-width (نطاق) */
/* انقر على أي شريط للقفز إلى نقطة التوقف تلك */

/* لرؤية استعلامات الوسائط التي تؤثر على العنصر المحدد: */
/* 1. حدد العنصر في لوحة العناصر */
/* 2. لوحة الأنماط تعرض جميع القواعد المطابقة */
/* 3. قواعد استعلامات الوسائط تعرض شرطها: */
/*    @media (max-width: 768px) { ... } */
/* 4. القواعد التي لا تطابق نافذة العرض الحالية تكون رمادية */

/* تصحيح مشاكل التخطيط المتجاوب: */
/* 1. ابدأ بأصغر عرض لنافذة العرض */
/* 2. اسحب نافذة العرض أوسع ببطء */
/* 3. راقب كسور التخطيط عند عروض محددة */
/* 4. تحقق مما إذا كان الكسر يحدث عند نقطة توقف مفقودة */
/* 5. افحص العناصر عند نقطة الكسر للعثور على السبب */

علامة تبويب التغييرات

تتبع علامة تبويب التغييرات كل تعديل تجريه على CSS (وملفات المصدر الأخرى) في لوحة الأنماط أثناء جلسة DevTools الخاصة بك. هذا مفيد للغاية لأنه من السهل فقدان تتبع جميع التعديلات الصغيرة التي أجريتها أثناء التصحيح. بدلاً من محاولة تذكر كل تغيير، يمكنك ببساطة فتح علامة تبويب التغييرات لرؤية فرق لكل ما عدّلته.

/* في Chrome: */
/* 1. افتح DevTools */
/* 2. اضغط Ctrl+Shift+P (Cmd+Shift+P على Mac) */
/* 3. اكتب "changes" واختر "Show Changes" */
/* 4. اللوحة تعرض عرض نمط الفرق:
      - خطوط حمراء = القيم المزالة/الأصلية
      - خطوط خضراء = القيم المضافة/الجديدة
      - اسم الملف وأرقام الأسطر لكل تغيير
*/

/* بعد التصحيح وإيجاد الإصلاح: */
/* 1. افتح علامة تبويب التغييرات */
/* 2. راجع جميع التعديلات التي أجريتها */
/* 3. انسخ التغييرات ذات الصلة إلى ملفات CSS المصدر */
/* 4. انقر بزر الفأرة الأيمن على تغيير للتراجع عنه إذا لزم الأمر */

/* في Firefox: */
/* لوحة التغييرات تعمل بشكل مماثل */
/* المفتش > علامة تبويب التغييرات تعرض جميع التعديلات */

لوحة الأداء

بينما يتضمن معظم تصحيح CSS الصحة البصرية، أحيانًا تكون المشكلة في الأداء. الرسوم المتحركة تتلعثم، والتمرير يبدو متقطعًا، أو عرض الصفحة بطيء. تسجل لوحة الأداء كل ما يفعله المتصفح خلال فترة زمنية وتقدم خطًا زمنيًا مفصلاً يُظهر أين يُقضى الوقت.

/* في لوحة أداء Chrome: */
/* 1. افتح لوحة الأداء */
/* 2. انقر على زر التسجيل (أيقونة الدائرة) */
/* 3. تفاعل مع الصفحة (مرر، حوّم، شغّل رسوم متحركة) */
/* 4. انقر إيقاف لإنهاء التسجيل */
/* 5. حلل النتائج:
      - ابحث عن إدخالات "Recalculate Style" الطويلة
      - تحقق من "Layout" (إعادة التدفق) المُفعّل بتغييرات CSS
      - ابحث عن عمليات "Paint" و "Composite"
      - حدد الإطارات التي تستغرق أكثر من 16.67ms (ميزانية 60fps)
*/

/* مشاكل أداء CSS الشائعة: */
/* - تحريك width/height/top/left يُفعّل Layout + Paint */
/* - تحريك transform/opacity يُفعّل Composite فقط (سريع) */
/* - المحددات المعقدة (متداخلة بعمق، عامة) تبطئ إعادة حساب الأنماط */
/* - قيم box-shadow و filter الكبيرة تزيد وقت الرسم */
/* - إعادة التدفق القسرية المتكررة من JavaScript تقرأ خصائص التخطيط */

/* علامة تبويب العرض (Chrome): */
/* اضغط Ctrl+Shift+P > "Show Rendering" */
/* الخيارات:
   - وميض الرسم: يُبرز المناطق المُعاد رسمها بالأخضر
   - مناطق انزياح التخطيط: يُظهر انزياحات التخطيط بالأزرق
   - حدود الطبقات: يُظهر حدود طبقات المُركِّب
   - إحصائيات عرض الإطارات: يُظهر عداد FPS في الوقت الفعلي
   - مشاكل أداء التمرير: يُعلّم معالجات التمرير البطيئة
*/

استراتيجيات التصحيح الشائعة

بعيدًا عن معرفة الأدوات، يتطلب التصحيح الفعال نهجًا استراتيجيًا. هذه التقنيات هي طرق مجرّبة ومختبرة يستخدمها المطورون المحترفون لعزل وإصلاح أخطاء CSS بسرعة.

استراتيجية التعليق

عندما لا تستطيع معرفة أي قاعدة CSS تسبب المشكلة، علّق بشكل منظم كتل CSS حتى تختفي المشكلة. نهج البحث الثنائي هذا يضيّق القاعدة المشكلة بشكل أسرع بكثير من قراءة مئات الأسطر من الكود.

/* الخطوة 1: علّق نصف ورقة الأنماط */
/* إذا اختفى الخطأ، فالمشكلة في القسم المُعلَّق */
/* إذا استمر، فالمشكلة في القسم المتبقي */

/* الخطوة 2: علّق نصف القسم المحدد */
/* كرر حتى تجد القاعدة الدقيقة المسببة للمشكلة */

/* في DevTools، يمكنك فعل هذا دون تحرير ملفات المصدر: */
/* ببساطة ألغِ تحديد الخصائص واحدة تلو الأخرى في لوحة الأنماط */
/* أو بدّل قواعد بأكملها بإلغاء تحديد جميع خصائصها */

/* يمكنك أيضًا استخدام وحدة التحكم: */
/* document.querySelector('.suspect').style.display = 'none'; */
/* لإزالة العناصر مؤقتًا من الصفحة بسرعة */

خدعة الحدود الخارجية

إضافة حد خارجي مرئي للعناصر هي واحدة من أسرع الطرق لفهم بنية التخطيط. على عكس border، لا يؤثر outline على نموذج الصندوق أو التخطيط، لذا إضافته لا يمكن أن تُدخل أخطاء جديدة.

/* أضف إلى وحدة تحكم المتصفح أو ورقة أنماط مؤقتة: */

/* حدود خارجية لكل عنصر في الصفحة */
* {
    outline: 1px solid red !important;
}

/* نسخة أكثر تحسينًا بألوان مختلفة لكل مستوى */
* { outline: 1px solid red !important; }
* * { outline: 1px solid green !important; }
* * * { outline: 1px solid blue !important; }
* * * * { outline: 1px solid orange !important; }

/* نسخة سريعة بوحدة التحكم: */
/* document.querySelectorAll('*').forEach(el =>
     el.style.outline = '1px solid red'); */

/* حدود خارجية لنوع محدد من العناصر فقط: */
div { outline: 1px solid red !important; }
section { outline: 1px solid blue !important; }
article { outline: 1px solid green !important; }

استراتيجية لون الخلفية

مشابهة لخدعة الحدود الخارجية، إضافة ألوان خلفية مؤقتة للعناصر تجعل حدود التخطيط غير المرئية مرئية. هذا مفيد بشكل خاص لتصحيح مشاكل المسافات والحاويات المنهارة والعناصر ذات الارتفاع الصفري.

/* تحديد حدود الحاويات بسرعة */
.container { background: rgba(255, 0, 0, 0.1) !important; }
.row { background: rgba(0, 255, 0, 0.1) !important; }
.column { background: rgba(0, 0, 255, 0.1) !important; }

/* تصحيح حاوية منهارة (ارتفاع صفري): */
/* إذا لم يكن لعنصر خلفية مرئية، */
/* قد يكون ارتفاعه صفرًا بسبب: */
/* - جميع الأبناء عائمون (استخدم clearfix أو overflow: hidden) */
/* - جميع الأبناء بتموضع مطلق */
/* - لا محتوى ولا ارتفاع صريح */
/* إضافة لون خلفية يجعل هذا واضحًا فورًا */

/* تصحيح الفائض غير المرئي */
.suspect {
    background: rgba(255, 0, 0, 0.2) !important;
    overflow: visible !important;  /* إظهار الفائض مؤقتًا */
}

نهج منظم لإيجاد الأخطاء

عندما تواجه خطأ CSS، قاوم الرغبة في البدء بتغيير القيم عشوائيًا. بدلاً من ذلك، اتبع هذا النهج المنظم الذي سيقودك إلى السبب الجذري بكفاءة في كل مرة.

/* الخطوة 1: أعد إنتاج الخطأ باستمرار */
/* - أي صفحة وحجم نافذة عرض ومتصفح؟ */
/* - هل يحدث عند التحميل، عند التحويم، عند التمرير؟ */
/* - هل يمكنك إعادة إنتاجه في نافذة خاصة/متخفية؟ */
/*   (يستبعد إضافات المتصفح) */

/* الخطوة 2: اعزل العنصر المتأثر */
/* - انقر بزر الفأرة الأيمن > فحص العنصر */
/* - تحقق من أنك حددت العنصر الصحيح */
/* - تحقق من وجود العنصر في DOM (غير مخفي بـ JS) */

/* الخطوة 3: تحقق من الأنماط المحسوبة */
/* - افتح لوحة Computed */
/* - تحقق من أن الخاصية المتوقعة محددة بالقيمة المتوقعة */
/* - إذا كانت القيمة خاطئة، انتقل للخطوة 4 */
/* - إذا كانت القيمة صحيحة، الخطأ قد يكون في مكان آخر */

/* الخطوة 4: تتبع مصدر النمط */
/* - في لوحة الأنماط، ابحث عن الخاصية */
/* - هل هي مشطوبة؟ قاعدة أخرى تتجاوزها */
/* - هل تعرض تحذيرًا؟ القيمة قد تكون غير صالحة */
/* - هل مفقودة تمامًا؟ المحدد قد لا يطابق */
/* - تحقق من الأخطاء المطبعية في أسماء الخصائص والقيم */

/* الخطوة 5: تحقق من السياق */
/* - هل العنصر في حاوية flex/grid؟ */
/*   (خصائص الحاوية تؤثر على تخطيط الأبناء) */
/* - هل عنصر أب يؤثر على هذا العنصر؟ */
/*   (overflow, position, transform تنشئ سياقات جديدة) */
/* - تحقق من عناصر الأسلاف للقص والفائض ومشاكل z-index */

/* الخطوة 6: اختبر إصلاحًا */
/* - حرر القيمة مباشرة في لوحة الأنماط */
/* - إذا نجح إصلاحك، افتح علامة تبويب التغييرات */
/* - دوّن التغيير الدقيق المطلوب */

/* الخطوة 7: طبّق الإصلاح على كود المصدر */
/* - انسخ التغيير من علامة تبويب التغييرات إلى ملف CSS الخاص بك */
/* - تحقق من استمرار الإصلاح بعد إعادة تحميل الصفحة */
/* - اختبر على متصفحات ونوافذ عرض أخرى */

ميزات DevTools المتقدمة

التجاوزات المحلية (Chrome)

يسمح لك Chrome بتجاوز الملفات المقدمة من موقع ويب بشكل دائم. هذا يعني أن تغييرات DevTools الخاصة بك تنجو من إعادة تحميل الصفحة، مما يجعلها مفيدة لجلسات التصحيح الممتدة أو وضع نماذج أولية للتغييرات على المواقع الحية قبل تطبيقها على كود المصدر.

/* في Chrome: */
/* 1. افتح DevTools > لوحة المصادر */
/* 2. انقر على علامة تبويب "التجاوزات" (قد تحتاج للنقر على >> لإيجادها) */
/* 3. انقر "+ حدد مجلدًا للتجاوزات" */
/* 4. اختر مجلدًا محليًا وامنح الإذن */
/* 5. الآن، أي تعديلات CSS تجريها في لوحة الأنماط */
/*    تُحفظ في ذلك المجلد وتستمر عبر عمليات إعادة التحميل */

/* هذا مفيد لـ: */
/* - جلسات التصحيح الطويلة حيث تحتاج لإعادة التحميل */
/* - اختبار تغييرات CSS على مواقع الإنتاج */
/* - وضع نماذج أولية لإعادة التصميم دون لمس كود المصدر */
/* - اختبار A/B للتغييرات المرئية قبل التنفيذ */

نظرة عامة على CSS (Chrome)

توفر لوحة نظرة عامة على CSS ملخصًا عالي المستوى لجميع CSS المستخدمة على الصفحة، بما في ذلك لوحات الألوان واستخدام الخطوط والتصريحات غير المستخدمة واستعلامات الوسائط. للوصول إليها، افتح قائمة الأوامر (Ctrl+Shift+P) واكتب "CSS Overview".

تحرير الأنماط مع خرائط المصدر

إذا كان مشروعك يستخدم معالجات CSS المسبقة (Sass, Less) أو حلول CSS-in-JS، يمكن لـ DevTools استخدام خرائط المصدر لعرض ملفات المصدر الأصلية بدلاً من مخرجات CSS المُجمَّعة. هذا يعني أنه يمكنك رؤية وتحرير متغيرات Sass والمزائج مباشرة في DevTools، مع تعيين التغييرات إلى ملفات المصدر الأصلية.