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

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

راجِع Network Reference (مرجع الشبكة) إذا كنت تريد تصفّح الميزات بدلاً من ذلك.

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

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

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

• التأكد من أنه يتم تحميل الموارد أو تنزيلها فعليًا على الإطلاق.
• فحص خصائص مورد فردي، مثل عناوين 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. انقر بزر الماوس الأيمن على عنوان جدول Network Log واختَر Domain (النطاق). يتم الآن عرض نطاق كل مورد.

   

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

محاكاة اتصال شبكة أبطأ

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

1. انقر على القائمة المنسدلة تقييد التي يتم ضبطها على متصل بالإنترنت تلقائيًا.

   

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

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

   

   الشكل 10. تحديد شبكة الجيل الثالث البطيئة

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

   

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

   

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

2. انقر على علامة التبويب معاينة. فيتم عرض عرض أساسي لتنسيق HTML.

   

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

   تكون علامة التبويب هذه مفيدة عندما تعرِض واجهة برمجة التطبيقات رمز خطأ في 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 لاستلام جائزتك.

اطّلِع على Network Reference (مرجع الشبكة) لاستكشاف المزيد من ميزات أدوات مطوّري البرامج المتعلّقة بفحص نشاط الشبكة.