أدوات المطور، أو Developer Tools، هي مجموعة أدوات مهمة تتيح للمطورين فحص وتعديل وتنقيح الشيفرات البرمجية على المتصفح مباشرة. Chrome DevTools، الموجودة في متصفح Google Chrome، توفر ميزات رائعة لفحص وتعديل CSS وHTML، بالإضافة إلى تحليل الأداء واكتشاف الأخطاء. في هذا الدرس، سنستعرض كيفية استخدام Chrome DevTools لفحص وتعديل CSS، وكذلك بعض الميزات الأخرى التي يمكن أن تجعل عملك كمطور ويب أسهل وأكثر فعالية.
فتح أدوات التطوير Chrome DevTools
للوصول إلى Chrome DevTools، يمكنك استخدام أي من الطرق التالية:
- الطريقة السريعة: اضغط على F12 أو Ctrl + Shift + I (في Windows) أو Cmd + Option + I (في macOS).
- من القائمة: اضغط على النقاط الثلاث في الزاوية العليا من المتصفح، ثم اذهب إلى More Tools > Developer Tools.
عند فتح DevTools، سترى نافذة تحتوي على عدة علامات تبويب مثل Elements وConsole وNetwork وSources، وكل واحدة من هذه العلامات توفر أدوات متخصصة.
تبويب Elements: فحص وتعديل HTML و CSS
علامة التبويب Elements هي المكان الذي يمكنك فيه فحص وتعديل الشيفرة HTML وCSS للصفحة مباشرة.
1. فحص العناصر
عند فتح DevTools، ستجد علامة تبويب Elements، والتي تعرض الشيفرة HTML للصفحة في نافذة على اليسار، فيما يتم عرض أنماط CSS المطبقة على العنصر المحدد في نافذة على اليمين.
للبدء:
- مرر مؤشر الفأرة على العنصر الذي تريد فحصه، ثم انقر بزر الفأرة الأيمن واختر Inspect.
- سيتعرف المتصفح على العنصر ويقوم بتمييزه في نافذة Elements ويظهر لك الأنماط الخاصة به في القسم الجانبي.
2. تعديل CSS مباشرة
يمكنك تعديل خصائص CSS للعنصر مباشرة من نافذة DevTools:
- في الجزء الأيمن من نافذة Elements، سترى قائمة Styles التي تحتوي على الأنماط المطبقة على العنصر.
- يمكنك إضافة خصائص جديدة، أو تعديل القيم الحالية بالنقر على السطر المراد تعديله وكتابة القيمة الجديدة.
- ستنعكس التعديلات في الوقت الفعلي على الصفحة، مما يتيح لك رؤية التغييرات فورًا.
مثال:
إذا أردت تغيير لون الخلفية لعنصر معين، يمكنك ببساطة تعديل خاصية background-color في نافذة Styles لتجربة ألوان مختلفة.
background-color: #f0f0f0;أدوات مفيدة في Chrome DevTools لفحص CSS
1. عرض الـ Box Model
أسفل قسم Styles، ستجد مربعًا يعرض Box Model للعنصر المحدد، والذي يوضح قيم margin وborder وpadding وcontent للعنصر. هذه الأداة مفيدة لفهم كيفية توزيع المسافات حول وحول العناصر.
2. إيقاف أو تفعيل الخصائص
يمكنك تجربة إيقاف أي خاصية CSS بالنقر على خانة الاختيار بجوار الخاصية. يساعدك ذلك في التحقق من تأثير تلك الخاصية على مظهر العنصر. على سبيل المثال، يمكنك إيقاف خاصية padding لترى كيف ستتغير المسافات حول العنصر.
3. Color Picker (منتقي الألوان)
عند النقر على قيمة اللون بجوار color أو background-color، ستظهر لك أداة Color Picker، والتي تسمح لك بتجربة ألوان مختلفة، بالإضافة إلى رؤية درجات اللون وتحديد الشفافية.
4. Device Mode: اختبار التصميمات المتجاوبة
يمكنك استخدام Device Mode لاختبار كيفية ظهور موقعك على أجهزة مختلفة، مثل الهواتف المحمولة والأجهزة اللوحية. لتفعيل هذا الوضع، انقر على أيقونة Toggle Device Toolbar (رمز الهاتف) أو اضغط Ctrl + Shift + M.
يتيح لك Device Mode ضبط عرض الشاشة وارتفاعها، وتجربة نقاط التحول (breakpoints) التي قد تكون أنشأتها باستخدام Media Queries في CSS.
استخدام التبويبات الأخرى لتحليل CSS
تبويب Console: الكشف عن الأخطاء
يحتوي Console على سجل لجميع الأخطاء والتنبيهات في الصفحة، وهو مفيد جدًا للكشف عن مشاكل CSS مثل القيم غير الصحيحة أو القواعد المكررة. يمكن أن يكون Console مصدرًا مفيدًا لتحديد الأخطاء التي قد تؤثر على الأداء أو على مظهر الصفحة.
تبويب Network: تحليل تحميل ملفات CSS
يعرض Network جميع الملفات التي يتم تحميلها في الصفحة، بما في ذلك ملفات CSS. يمكنك رؤية حجم كل ملف ووقت التحميل، مما يساعدك على تحسين سرعة الموقع بتقليل حجم ملفات CSS الكبيرة أو دمجها.
تبويب Performance: تحسين أداء الرسوم المتحركة
يمكنك استخدام تبويب Performance لتحليل أداء CSS Animations، والتحقق من مدى سلاسة الرسوم المتحركة ومدى تأثيرها على أداء الموقع. قم بتشغيل أداة التسجيل (Record) لترى كيف تؤثر التحولات والانتقالات على سرعة التحميل والتفاعل.
نصائح لتحسين تجربة استخدام DevTools لفحص CSS
- التدرب على الأدوات المختلفة: خذ بعض الوقت لاستكشاف كل الأدوات الموجودة في DevTools.
- اختبار تغييرات CSS في الوقت الحقيقي: يمكنك إجراء تغييرات مباشرة على CSS ورؤية التأثير على الفور، مما يساعدك في اتخاذ قرارات تصميمية بشكل أسرع.
- التحقق من الأداء: استخدم أدوات Performance وNetwork لتحليل تأثير CSS على سرعة الموقع.
- حفظ التعديلات: تذكر أن التعديلات التي تجريها في DevTools هي مؤقتة ولن يتم حفظها في ملفات الموقع. يجب عليك نسخ الشيفرات المعدلة وإضافتها إلى ملفات CSS الأصلية.
الخاتمة
تعتبر Chrome DevTools أداة قوية وفعالة لجميع مطوري الويب، حيث تساعدك في فحص وتعديل CSS وتحليل الأداء والتحقق من التوافقية مع الأجهزة المختلفة. من خلال هذه الأدوات، يمكنك تجربة التعديلات بسرعة والتأكد من أن الموقع يعمل بشكل مثالي عبر جميع المتصفحات والأجهزة.
اكتشاف المزيد من كود التطور
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.
