كيفية استخدام Google Chrome لتصحيح أخطاء CSS

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

ستتناول هذه المقالة كيفية عرض فئات CSS وأنماطها المطبقة في نافذة Inspect Element. سيغطي أيضًا كيفية استخدام هذا لمعاينة التغييرات التي تجريها على CSS في الوقت الفعلي.

فتح Inspect Element في Google Chrome

يمكنك زيارة أي موقع ويب وفتح نافذة Inspect Element لترى كيف يبدو كود HTML أو CSS الخاص به. هذا البرنامج التعليمي سوف تستخدم عينة موقع لتوضيح.

يمكنك فتح نافذة فحص العنصر في Google Chrome بالضغط على F12 مفتاح. يمكنك أيضًا النقر بزر الماوس الأيمن في أي مكان على الصفحة والنقر فوق فحص.

ستفتح نافذة Inspect Element على كود HTML للجزء الذي نقرت عليه بزر الماوس الأيمن من موقع الويب. هذا هو المكان الذي يمكنك أيضًا تحرير نص موقع الويب باستخدام Google Chrome.

علامة تبويب الأنماط في نافذة فحص العنصر

في نافذة فحص العنصر نفسها ، أسفل ملف عناصر

علامة التبويب ، هناك مكان لعرض كل من كود HTML و CSS. يمكنك رؤية كود HTML على يسار نافذة فحص العنصر. يمكنك العثور على كود CSS على اليمين ، أسفل ملف الأنماط التبويب.

لنفترض أن لديك عنصر HTML بفئة تسمى "card-padding" ، مع ترك مساحة لليمين واليسار مطبقة عليه:

.card-padding {
 الحشوة اليمنى: 0vh ؛
 المساحة المتروكة: 0vh ؛
}

إذا قمت بمعاينة موقع الويب هذا في المستعرض ، فستتمكن من تحديد ملف شعبة عنصر مع فئة "card-padding". أي تصميم يتم تطبيقه على فئة "حشو البطاقات" سيظهر على اليمين ، أسفل الأنماط التبويب.

عند التمرير فوق عنصر في عرض تعليمات HTML البرمجية ، سيتم تمييز هذا الجزء من صفحة الويب في مستعرض الويب. سيتم أيضًا عرض نوع عنصر HTML مع أي أسماء فئة في مربع حوار بجوار العنصر.

في هذه الحالة ، سترى حاوية div مع تمييز أسماء الفئات "row" و "card-padding" و "pb-5" على الصفحة.

كيفية إجراء تغييرات على CSS في الوقت الفعلي

يمكنك تغيير CSS مباشرة من علامة تبويب الأنماط:

1. استخدام هذا الموقع، انقر بزر الماوس الأيمن على العنوان الأول.
2. في هذا العنوان المحدد h4 ، سترى فئة مطبقة عليه تسمى "text-grey" بلون # 8a8a8a.
3. غيّر اللون إلى لون آخر بدلاً من ذلك ، مثل البرتقالي. ما عليك سوى تغيير القيمة نفسها ، وليس اسم الخاصية ، "اللون".
4. ستلاحظ تغيير العنوان من الرمادي الداكن إلى البرتقالي.
5. إذا كنت ترغب في تعطيل نمط CSS معين ، فقم بإلغاء تحديد المربع الموجود على يسار النمط.
6. يمكنك أيضًا إضافة المزيد من الأنماط إلى المجموعة الأصلية. انقر أسفل أو على يمين خاصية لبدء إضافة خاصية جديدة. يجب عليك استخدام نفس الصيغة كما تفعل في ملف CSS العادي عند إضافة أنماط جديدة.
7. إذا كنت تقوم بمعاينة موقع ويب محلي ، فيمكنك الاستمرار في إجراء تغييرات CSS حتى تقترب من الشكل والمظهر المطلوبين لواجهة المستخدم الخاصة بك. بعد ذلك ، يمكنك نسخ تغييرات CSS التي أجريتها مرة أخرى في التعليمات البرمجية المحلية الخاصة بك.

كيفية تعديل CSS من مكتبات أو أطر خارجية

يمكنك أيضًا إجراء تغييرات على عناصر HTML إذا كنت تستخدم مكتبات أو أطر عمل تابعة لجهات خارجية مثل Bootstrap.

1. استخدام هذا الموقع، انقر بزر الماوس الأيمن فوق أحد أزرار Bootstrap على الصفحة.
2. سترى فئتين مطبقتين على الزر ، "btn" و "btn-basic". يحتوي Bootstrap بالفعل على تصميمه الخاص المطبق على كلا الفئتين. الألوان التي يتم استخدامها كخلفية وألوان حد هي # 007bff. غيّر هذا إلى شيء آخر ، مثل البنفسجي.
3. إذا كنت تقوم بمعاينة موقع ويب محلي ، فيمكنك حينئذٍ إضافة التغييرات الجديدة مرة أخرى إلى التعليمات البرمجية المحلية الخاصة بك. بناءً على ترتيب CSS الخاص بك ، قد تحتاج إلى استخدام محدد CSS أكثر تحديدًا. على سبيل المثال ، ابدأ المحدد بـ ".btn". سيؤدي هذا إلى تجاوز تصميم Bootstrap الأصلي.

   .btn.btn الأساسي {
    لون الخلفية: بنفسجي.
    لون الحدود: بنفسجي.
   }

ماذا يعني element.style في جدول الأنماط؟

يحتوي كل عنصر HTML تقوم بتمييزه في نافذة فحص العنصر على كتلة element.styles. هذا يعادل إضافة نمط مضمّن إلى عنصر HTML ، بدلاً من استهدافه باستخدام محدد.

1. انقر بزر الماوس الأيمن فوق عنصر HTML. أضف أي نمط إلى قسم element.style ، مثل:

   اللون: whitesmoke.

2. ستلاحظ أن رمز عنصر HTML قد تغير أيضًا. تحتوي الكود الموجود في عنصر HTML الآن على السطر الجديد:

   النمط ="اللون: whitesmoke."

كيف ترث عناصر HTML الطفل التصميم

إذا كانت لديك قيمتا تصميم مختلفتان مطبقتان على عنصر أصلي وعنصر فرعي ، فستكون الأولوية للقيمة الموجودة في العنصر الفرعي.

1. استخدام هذا الموقع، انقر بزر الماوس الأيمن في أي مكان على الحواف الخارجية للموقع.
2. في قسم HTML من نافذة Inspect Element ، ركز على عنصرين معينين في HTML. يوجد عنصر div أصلي مع فئة "محتوى" مطبقة عليه. يحتوي عنصر HTML هذا على عنصر فرعي h4 ، مع فئة "text-gray" مطبقة عليه.
3. حدد عنصر HTML h4 الفرعي ، وقم بتعطيل نمط اللون في فئة "text-grey".
4. حدد عنصر HTML الأصلي مع فئة "المحتوى". أضف نمط CSS التالي إلى الفصل الدراسي:

   لون احمر؛

   سيتحول لون كل النص داخل div الأصل إلى اللون الأحمر. سينتقل هذا التغيير أيضًا إلى العناصر الفرعية ، مما يعني أن h4 سيكون له لون أحمر أيضًا.
5. حدد عنصر HTML h4 الفرعي ، وأضف نمطًا جديدًا إلى فئة "text-grey":

   الون الاخضر؛

   سيؤدي هذا إلى تجاوز تصميم أي فصول للوالدين. سيتحول عنصر H4 HTML من اللون الأحمر إلى اللون الأخضر.
6. سترى أيضًا خطًا إذا قمت بعرض نمط فئة "المحتوى". هذا يؤكد أن العنصر الفرعي h4 يتجاوز لون الأصل.

فوائد تصحيح أخطاء CSS في المتصفح

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

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

يمكنك إجراء تغييرات على نافذة Inspect Element حتى تقترب من التصميم الذي تريده. بمجرد الانتهاء من ذلك ، يمكنك نسخ الرمز من نافذة Inspect Element ، مرة أخرى إلى الكود المحلي الخاص بك. لا يزال بإمكانك إعادة تشغيل تطبيقك لاختبار أن تغييرات CSS الجديدة لا تزال تعمل.

غطى هذا البرنامج التعليمي أساسيات كيفية تصحيح أخطاء CSS لموقع ويب باستخدام نافذة Inspect Element ، بما في ذلك مكان العثور على CSS في علامة تبويب الأنماط.

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

هناك العديد من الأشياء الأخرى المثيرة للاهتمام التي يمكنك القيام بها من خلال نافذة فحص العنصر.

7 أشياء مرحة يمكنك القيام بها باستخدام فحص العنصر

اقرأ التالي

نبذة عن الكاتب