تحتوي معظم المتصفحات على أداة "مخفية" تتيح لنا النظر إلى ما وراء الكواليس في أى موقع من مواقع الويب و هذا مفيد للغاية ،
إما لفحص موقع الويب الخاص بنا أو للحصول على الإلهام من مواقع الويب الأخرى.

يحتوي chrome حاليًا على الأداة الأكثر اكتمالًا ، والتي تسمى أدوات مطور Chrome (اختصار DevTools ).

فتح Chrome DevTools

يمكن فتح DevTools بطرق متعددة:

• انقر بزر الماوس الأيمن فوق أي عنصر على صفحه ويب واختر "فحص العنصر".Inspect Element.
• أستخد م لوحه المفاتيح Ctrl + Shift + I أو F12.

دعنا نجرب هذا في موقع محفظتنا. يجب أن تشاهد الآن النافذة التالية:

فحص عنصر

مع DevTools ، يمكننا بسهولة فحص العناصر الفردية على موقعنا. خذ مثال عنصر h2: انقر بزر الماوس الأيمن على عنوان "Welcome" واختر "فحص العنصر". هذا يفتح DevTools ويقفز إلى عنصر h2.

على الجانب الأيمن ، يمكنك رؤية الأنماط المطبقة على عنصر h2. يجب أن تشاهد الألوان التي حددناها في main.css .
أسفل قواعد main.css ، يمكنك رؤية منطقة لقواعد ورقة الانماط الافتراضيه. هذه هي القواعد الافتراضية التي يتم تطبيقها على عناصر h2 بواسطة المستعرض. في الأسفل سترى مستطيلًا ملونًا. يوضح هذا حجم العناصر الفاصلة h2 وحدودها. على سبيل المثال ، يمكنك رؤية القيمة padding:5px ، كما حددناها في main.css .

تغيير الأنماط و HTML

الآن يأتي الجزء المثير: يمكننا تغيير الأنماط أو تعطيلها وأيضًا تحرير HTML مباشرة في المتصفح! على سبيل المثال ، إذا نقرنا على مربع لون الخلفية ، فيمكننا اختيار لون خلفية مختلف أو يمكننا إدخال قيمة مختلفة للحشو. يمكن تغيير HTML بالنقر بزر الماوس الأيمن على عنصر في نافذة DevTools واختيار تحرير ... إنها طريقة مريحة للغاية لإجراء تغييرات تجريبية. ومع ذلك ، فإن التغييرات مؤقتة فقط ، عند إعادة تحميل الصفحة ، تتم استعادة موقع الويب الأصلي.

إلالهام من المواقع الأخرى

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

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

ميزات DevTools الأخرى

هناك العديد من الطرق للعمل مع DevTools. إذا كنت تريد معرفة المزيد حول هذا الموضوع ، اقرأ DevTools documentation .

ماذا بعد

في الجزء التالي ، نقوم بإنشاء صفحات إضافية للمدونة وللمشاريع وللاتصال تابع الجزء 5:

هذاالمقال مترجم عن مقال Marco Jakob code.makery

نرجو الرجوع الى المقاله السابقه للاطلاع على بعض المعلومات المهمه لتعلم برمجه الوب

المصادر