فحص نشاط الشبكة

Kayce Basques

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

يُرجى الاطّلاع على مرجع الشبكة إذا كنت ترغب في تصفح الميزات بدلاً من ذلك.

اقرأ أو شاهد إصدار الفيديو لهذا البرنامج التعليمي:

حالات استخدام لوحة "الشبكة"

بشكل عام، يمكنك استخدام لوحة "الشبكة" عند الحاجة للحرص على تنزيل الموارد أو تحميلها على النحو المتوقّع. تشمل حالات الاستخدام الأكثر شيوعًا للوحة "الشبكة" ما يلي:

• التأكّد من أنّه يجري تحميل الموارد أو تنزيلها على الإطلاق
• فحص خصائص مورد فردي، مثل عناوين HTTP ومحتواه وحجمه وما إلى ذلك.

إذا كنت تبحث عن طرق لتحسين أداء تحميل الصفحات، لا تبدأ بلوحة "الشبكة". هناك العديد من أنواع مشاكل أداء التحميل التي لا تتعلق بنشاط الشبكة. ابدأ بلوحة Lighthouse لأنها تقدّم لك اقتراحات مستهدَفة حول كيفية تحسين صفحتك. يُرجى الاطّلاع على تحسين سرعة الموقع الإلكتروني.

فتح لوحة "الشبكة"

لتحقيق أقصى استفادة من هذا البرنامج التعليمي، افتح العرض التوضيحي وجرِّب الميزات في صفحة العرض التوضيحي.

1. افتح العرض التوضيحي للبدء.

   

   الشكل 1. العرض التوضيحي

   قد تفضّل نقل العرض التوضيحي إلى نافذة منفصلة.

   

   الشكل 2. العرض التوضيحي في نافذة واحدة وهذا البرنامج التعليمي في نافذة مختلفة

2. افتح أدوات مطوري البرامج من خلال الضغط على Control+Shift+J أو Command+Option+J (في نظام التشغيل Mac). ستفتح لوحة وحدة التحكّم.

   

   الشكل 3. وحدة التحكّم

   ننصحك بوضع "أدوات مطوري البرامج" في أسفل النافذة.

   

   الشكل 4. تم إرساء أدوات مطوّري البرامج في أسفل النافذة.

3. انقر على علامة التبويب الشبكة. يتم فتح لوحة "الشبكة".

   

   الشكل 5. تم إرساء أدوات مطوّري البرامج في أسفل النافذة.

في الوقت الحالي، لوحة "الشبكة" فارغة. ويرجع ذلك إلى أنّ "أدوات مطوري البرامج" لا تُسجِّل إلا نشاط الشبكة عندما تكون مفتوحة ولم يحدث أي نشاط على الشبكة منذ فتح "أدوات مطوري البرامج".

تسجيل أنشطة الشبكة

لعرض نشاط الشبكة الذي تسببه صفحة ما:

1. إعادة تحميل الصفحة تسجِّل لوحة "الشبكة" جميع أنشطة الشبكة في سجلّ الشبكة.

   

   الشكل 6. سجلّ الشبكة

   يمثل كل صف من سجل الشبكة موردًا. بشكل افتراضي، يتم سرد الموارد بشكل زمني. عادةً ما يكون المورد العلوي هو مستند HTML الرئيسي. المورد السفلي هو كل ما تم طلبه في النهاية.

   يمثل كل عمود معلومات حول المورد. يعرض الشكل 6 الأعمدة التلقائية:

   • الحالة: رمز استجابة HTTP.
   • النوع: نوع المورد.
   • بادئ التشغيل: سبب طلب مورد. ينقلك النقر على رابط في عمود المُنشئ إلى رمز المصدر الذي تسبب في الطلب.
   • الوقت. المدة التي استغرقها الطلب

   • منهجية الشلال. تمثيل رسومي للمراحل المختلفة للطلب. مرر مؤشر الماوس فوق شلال للاطلاع على التقسيم.

2. ستُسجّل "أدوات مطوري البرامج" نشاط الشبكة في "سجلّ الشبكة" ما دامت مفتوحة لديك. لتوضيح ذلك، انظر أولاً إلى الجزء السفلي من سجلّ الشبكة وقم بتدوين ملاحظة في ذهنك لآخر نشاط.

3. الآن، انقر على الزر الحصول على البيانات في العرض التوضيحي.

4. انظر إلى الجزء السفلي من سجلّ الشبكة مرة أخرى. هناك مورد جديد باسم getstarted.json. تسبّب النقر على الزر الحصول على البيانات في طلب الصفحة لهذا الملف.

   

   الشكل 7. مورد جديد في سجل الشبكة

عرض المزيد من المعلومات

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

1. انقر بزر الماوس الأيمن على رأس جدول سجل الشبكة واختَر النطاق. يتم الآن إظهار نطاق كل مورد.

   

   الشكل 8. تفعيل عمود "النطاق"

محاكاة اتصال شبكة بطيء

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

1. انقر على القائمة المنسدلة Throttling (تقييد)، التي يتم ضبطها على Online (على الإنترنت) تلقائيًا.

   

   الشكل 9. تفعيل التقييد

2. اختَر شبكة الجيل الثالث البطيئة.

   

   الشكل 10. اختيار شبكة الجيل الثالث البطيئة

3. اضغط مع الاستمرار على إعادة التحميل ثم اختَر إفراغ ذاكرة التخزين المؤقت وإعادة التحميل الثابت.

   

   الشكل 11. إفراغ ذاكرة التخزين المؤقت وإعادة التحميل بشكل كامل

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

التقاط لقطات شاشة

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

1. انقر على التقاط لقطات شاشة .

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

   

   الشكل 12. لقطات شاشة لتحميل الصفحة

3. انقر على الصورة المصغّرة الأولى. توضح لك "أدوات مطوري البرامج" نشاط الشبكة الذي كان يحدث في تلك اللحظة الزمنية.

   

   الشكل 13. نشاط الشبكة الذي كان يحدث أثناء لقطة الشاشة الأولى

4. انقر على التقاط لقطات شاشة مرّة أخرى لإغلاق جزء لقطات الشاشة.

5. يُرجى إعادة تحميل الصفحة مرة أخرى.

فحص تفاصيل مرجع

انقر على مورد لمعرفة المزيد من المعلومات عنه. جرِّب ذلك الآن:

1. انقر على getstarted.html تظهر علامة التبويب العناوين. استخدِم علامة التبويب هذه لفحص عناوين HTTP.

   

   الشكل 14. علامة تبويب "العناوين"

2. انقر على علامة التبويب معاينة. يتم إظهار العرض الأساسي لـ HTML.

   

   الشكل 15. علامة التبويب "Preview" (معاينة)

   تكون علامة التبويب هذه مفيدة عندما تعرض واجهة برمجة التطبيقات رمز خطأ في HTML وتسهّل قراءة رمز HTML المعروض من رمز مصدر HTML أو عند فحص الصور.

3. انقر على علامة التبويب الرد. يتم عرض رمز مصدر HTML.

   

   الشكل 16. علامة تبويب "الردود"

4. انقر على علامة التبويب التوقيت. ويتم عرض تحليل لنشاط الشبكة لهذا المورد.

   

   الشكل 17. علامة التبويب "التوقيت"

5. انقر على إغلاق لعرض سجلّ الشبكة مرة أخرى.

   

   الشكل 18. زر الإغلاق

عناوين شبكة البحث واستجاباتها

يمكنك استخدام جزء البحث عندما تحتاج إلى البحث في عناوين HTTP واستجابات جميع الموارد عن سلسلة معيّنة أو تعبير عادي.

على سبيل المثال، لنفترض أنك تريد التحقق مما إذا كانت مواردك تستخدم سياسات ذاكرة التخزين المؤقت المعقولة.

1. انقر على رمز البحث . يتم فتح جزء "البحث" على يمين سجل الشبكة.

   

   الشكل 19. لوحة البحث

2. اكتب Cache-Control واضغط على Enter. تسرد لوحة البحث جميع مثيلات Cache-Control التي تعثر عليها في عناوين الموارد أو المحتوى.

   

   الشكل 20. نتائج البحث عن Cache-Control

3. انقر على إحدى النتائج لعرضها. إذا تم العثور على الاستعلام في عنوان، فستفتح علامة تبويب "العناوين". إذا تم العثور على الاستعلام في المحتوى، فستفتح علامة تبويب "الرد".

   

   الشكل 21. نتيجة بحث مميزة في علامة التبويب "العناوين"

4. أغلق جزء البحث وعلامة التبويب "التوقيت".

   

   الشكل 22. أزرار الإغلاق

تصفية الموارد

توفر أدوات مطوري البرامج العديد من عمليات سير العمل لتصفية الموارد غير ذات الصلة بالمهمة القائمة.

الشكل 23. شريط أدوات "الفلاتر"

يجب أن يكون شريط أدوات الفلاتر مفعَّلاً بشكلٍ تلقائي. في حال عدم حدوث ذلك:

1. انقر على رمز الفلترة لإظهاره.

الفلترة حسب السلسلة أو التعبير العادي أو الموقع

يتيح مربّع النص فلتر استخدام العديد من أنواع الفلترة المختلفة.

1. اكتب png في مربّع النص فلتر. لن تظهر سوى الملفات التي تحتوي على النص png. في هذه الحالة، تكون الملفات الوحيدة التي تتطابق مع الفلتر هي الصور بتنسيق PNG.

   

   الشكل 24. عامل تصفية سلسلة

2. اكتب /.*\.[cj]s+$/. تعمل "أدوات مطوري البرامج" على فلترة أي مورد يحمل اسم ملف لا ينتهي بـ j أو c متبوعًا بحرف s واحد أو أكثر.

   

   الشكل 25. فلتر التعبير العادي

3. اكتب -main.css. تعمل "أدوات مطوّري البرامج" على فلترة main.css. إذا تطابق أي ملف آخر مع النمط، فسيتم تصفيته أيضًا.

   

   الشكل 26. فلتر سلبي

4. اكتب domain:raw.githubusercontent.com في مربّع النص فلتر. تعمل "أدوات مطوري البرامج" على فلترة أي مورد بعنوان URL لا يتطابق مع هذا النطاق.

   

   الشكل 27. فلتر الخصائص

   اطّلِع على فلترة الطلبات حسب المواقع للحصول على قائمة كاملة بالمواقع القابلة للفلترة.

5. امسح مربع النص فلتر لأي نص.

الفلترة حسب نوع المورِد

للتركيز على نوع معين من الملفات، مثل أوراق الأنماط:

1. انقر على CSS. وتتم فلترة جميع أنواع الملفات الأخرى.

   

   الشكل 28. يتم عرض ملفات CSS فقط.

2. لعرض النصوص البرمجية أيضًا، اضغط مع الاستمرار على Control أو Command (Mac) ثم انقر على JS.

   

   الشكل 29. عرض ملفات CSS وJS فقط

3. انقر على الكل لإزالة الفلاتر والاطّلاع على جميع الموارد مرة أخرى.

راجِع طلبات الفلترة للتعرّف على مهام سير عمل الفلترة الأخرى.

طلبات الحظر

كيف تبدو الصفحة وسلوكها في حال عدم توفُّر بعض مواردها؟ هل يفشل تمامًا، أم لا يزال يعمل إلى حد ما؟ حظر الطلبات لمعرفة ما يلي:

1. اضغط على Control+Shift+P أو Command+Shift+P (نظام التشغيل Mac) لفتح قائمة الأوامر.

   

   الشكل 30. قائمة الأوامر

2. اكتب block، واختَر عرض حظر الطلبات، ثم اضغط على Enter.

   

   الشكل 31. عرض حظر الطلبات

3. انقر على رمز إضافة تصميم .

4. اكتب main.css.

   

   الشكل 32. جارٍ حظر "main.css"

5. انقر على إضافة.

6. إعادة تحميل الصفحة كما هو متوقع، تم تغيير نمط الصفحة قليلاً بسبب حظر ورقة الأنماط الرئيسية. سجِّل الصف main.css في "سجلّ الشبكة". يعني النص الأحمر أنه تم حظر المورد.

   

   الشكل 33. تم حظر main.css

7. أزِل العلامة من مربّع الاختيار تفعيل حظر الطلبات.

الخطوات التالية

تهانينا، لقد أكملت البرنامج التعليمي. انقر على Dispense Award لاستلام جائزتك.

يمكنك الاطّلاع على مرجع الشبكة لاكتشاف المزيد من ميزات "أدوات مطوري البرامج" المتعلقة بفحص نشاط الشبكة.