أدوات مطوري كروم (Chrome DevTools): دليل شامل لتصفية طلبات الشبكة

بصفتنا مطوري واجهات أمامية (Front-End Developers)، نقضي معظم وقتنا في المتصفح مع فتح أدوات المطورين (DevTools) باستمرار (إلا إذا كنا نشاهد مقاطع فيديو على يوتيوب… وأحياناً حتى في هذه الحالة!). تُعد لوحة الشبكة (Network tab) واحدة من الأقسام الرئيسية في DevTools، وتقدم مجموعة واسعة من الإمكانيات التي لا غنى عنها لأي مطور.

تتيح لك لوحة الشبكة القيام بالعديد من المهام الهامة، مثل:

• البحث عن طلبات الشبكة باستخدام نص معين.
• البحث عن طلبات الشبكة باستخدام التعبيرات النمطية (Regex).
• تصفية (استبعاد) طلبات شبكة محددة.
• استخدام خاصية التصفية لعرض طلبات الشبكة حسب نطاق معين.
• البحث عن طلبات الشبكة حسب نوع المورد.

لغرض هذا الدليل، سنستخدم الصفحة الرئيسية لموقع freeCodeCamp، وهي freecodecamp.org/news. ببساطة، انتقل إلى هذه الصفحة وافتح لوحة Network. يمكنك فتح أدوات المطورين (DevTools) بالضغط على cmd + opt + j إذا كنت تستخدم جهاز Mac، أو ctrl + shift + j إذا كنت تستخدم نظام Windows. سيؤدي هذا إلى فتح لوحة Console افتراضياً في DevTools.

بمجرد فتح لوحة Console، ما عليك سوى النقر على لوحة Network لجعلها مرئية والبدء في استكشاف طلبات الشبكة.

بعد فتح لوحة Network وتأكد من أن الصفحة الصحيحة (freecodecamp.org/news) مفتوحة، يمكننا البدء في استعراض طرق التصفية المختلفة.

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

فهم لوحة الشبكة (Network Panel) في Chrome DevTools

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

طرق متقدمة لتصفية طلبات الشبكة

تصفية طلبات الشبكة باستخدام النص

إحدى أبسط طرق التصفية هي البحث عن طلبات الشبكة التي تحتوي على نص معين. هذه الطريقة مفيدة للعثور بسرعة على موارد محددة أو للتحقق من تحميل مكتبات معينة.
على سبيل المثال، اكتب analytics في مربع نص التصفية. ستلاحظ أن DevTools سيعرض فقط الملفات التي تحتوي على كلمة analytics في اسمها أو مسارها.

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

التصفية باستخدام التعبيرات النمطية (Regex)

للحصول على قدر أكبر من التحكم والدقة في التصفية، يمكنك استخدام التعبيرات النمطية (Regular Expressions). هذه الطريقة تسمح لك بإنشاء أنماط بحث معقدة تتجاوز البحث النصي البسيط.
على سبيل المثال، اكتب /.*\min.[c]s+$/ في مربع التصفية. سيقوم DevTools بتصفية أي موارد تنتهي أسماؤها بـ min.c متبوعة بحرف s واحد أو أكثر. هذا النمط مفيد للعثور على ملفات CSS أو JavaScript المصغرة (minified) التي قد تحتوي على أخطاء أو تحتاج إلى تحليل.

تذكر أن التعبيرات النمطية يجب أن تُحاط بشرطتين مائلتين (/) للإشارة إلى أنها نمط Regex.

استبعاد طلبات الشبكة (Excluding Requests)

في بعض الأحيان، قد تحتاج إلى استبعاد طلبات معينة من عرض الشبكة للتركيز على ما تبقى. يمكنك القيام بذلك عن طريق إضافة علامة الطرح (-) قبل النص أو التعبير النمطي.
على سبيل المثال، اكتب -min.js. سيقوم DevTools بتصفية جميع الملفات التي تحتوي على min.js في اسمها أو مسارها. إذا كانت هناك أي ملفات أخرى تتطابق مع هذا النمط، فسيتم استبعادها أيضاً ولن تكون مرئية في لوحة الشبكة.

هذه الميزة مفيدة جداً عند محاولة عزل المشكلات التي لا تتعلق بالملفات المصغرة أو الشائعة.

التصفية حسب النطاق (Domain)

عند العمل على مواقع ويب معقدة تستخدم موارد من نطاقات متعددة (مثل CDNs أو APIs خارجية)، قد تحتاج إلى التركيز على طلبات من نطاق معين.
اكتب domain:code.jquery.com في منطقة التصفية. سيعرض هذا فقط طلبات الشبكة التي تنتمي إلى النطاق code.jquery.com. هذا يسمح لك بتحليل كيفية تفاعل صفحتك مع موارد خارجية محددة.

يمكنك استبدال code.jquery.com بأي نطاق آخر ترغب في مراقبته.

التصفية حسب نوع المورد (Resource Type)

تتيح لك DevTools أيضاً تصفية الطلبات بناءً على نوع المورد. هذه ميزة قوية لتحديد مشكلات الأداء المتعلقة بأنواع معينة من الملفات.
إذا كنت ترغب فقط في رؤية ملفات الخطوط (font(s)) المستخدمة في صفحة معينة، انقر على زر Font في شريط أنواع الموارد.

أو إذا كنت ترغب في رؤية ملفات Web Socket التي يتم تحميلها في صفحة معينة، انقر على زر WS.

يمكنك أيضاً الذهاب خطوة أبعد وعرض ملفات Font و WS معاً. ببساطة، انقر على Font أولاً، ثم اضغط على cmd (في Mac) أو ctrl (في Windows) وانقر على WS لتحديد أنواع متعددة.

هذه المرونة في التصفية حسب النوع تسمح لك بتشخيص مشكلات التحميل المتعلقة بفئات معينة من الموارد.

الخلاصة التقنية

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