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

Kayce Basques

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

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

اطّلِع على الخطوات التالية أو شاهِد النسخة المرئيّة من هذا الدليل التعليمي:

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

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

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

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

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

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

1. افتح العرض التجريبي لميزة "البدء".

   

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

   

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

   

   قد تفضّل تثبيت "أدوات مطوري البرامج" في أسفل النافذة.

   

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

   

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

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

للاطّلاع على نشاط الشبكة الذي تسبّبه إحدى الصفحات:

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

   

   يمثّل كل صف في سجلّ الشبكة موردًا. يتم إدراج الموارد تلقائيًا بترتيبٍ زمني. وعادةً ما يكون المرجع الرئيسي هو مستند HTML الرئيسي. المورد السفلي هو أيّ مكوّن تمّ طلبه مؤخرًا.

   يمثّل كل عمود معلومات عن مورد. الأعمدة التلقائية هي:

   • الحالة: رمز استجابة HTTP.
   • ‫Type: نوع المورد
   • المشغِّل: السبب الذي أدّى إلى طلب أحد الموارد. يؤدي النقر على رابط في عمود "المشغِّل" إلى نقلك إلى الرمز المصدر الذي أدّى إلى تقديم الطلب.
   • الحجم: مقدار الموارد التي تم نقلها عبر الشبكة
   • الوقت: المدة التي استغرقها الطلب
   ملاحظة: يُعرف الرسم البياني أعلى "سجلّ الشبكة" باسم "نظرة عامة". ولن يتم استخدامه في هذا الدليل التعليمي، لذا يمكنك إخفائه إذا أردت. اطّلِع على إخفاء المسار "نظرة عامة".

2. ما دامت "أدوات مطوّري البرامج" مفتوحة، ستسجّل نشاط الشبكة في سجلّ الشبكة. للتوضيح، يُرجى أولاً الاطّلاع على أسفل سجلّ الشبكة وتدوين النشاط الأخير.

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

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

   

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

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

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

   

ملاحظة: يمكنك الاطّلاع على عنوان URL الكامل لمرجع من خلال تمرير مؤشر الماوس فوق الخلية الخاصة به في عمود الاسم.

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

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

1. انقر على القائمة المنسدلة تقييد السرعة، والتي تكون مضبوطة على بدون تقييد السرعة تلقائيًا.

   

2. اختَر 3G.

   

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

   

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

   ملاحظة: لا يتوفّر سير العمل إفراغ ذاكرة التخزين المؤقت وإعادة التحميل القسري إلا عندما تكون "أدوات مطوّري البرامج" مفتوحة.

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

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

لالتقاط لقطات شاشة، اتّبِع الخطوات التالية:

1. انقر على إعدادات إعدادات الشبكة.

2. فعِّل مربّع الاختيار لقطات الشاشة check_box.

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

   

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

   

5. فعِّل مربّع الاختيار لقطات الشاشة لإغلاق علامة التبويب "لقطات الشاشة".

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

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

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

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

   

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

   

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

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

   

   ملاحظة: عند تصغير ملف، يؤدي النقر على الزر التنسيق data_object في أسفل علامة التبويب الردّ إلى إعادة تنسيق محتوى الملف لتسهيل قراءته.

4. انقر على علامة التبويب المشغِّل لعرض شجرة تربط سلسلة بادئ تشغيل الطلب.

   

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

   

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

   

عناوين شبكة البحث والردود

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

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

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

   

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

   

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

   

4. أغلِق علامة التبويب بحث وعلامة التبويب الرؤوس.

   

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

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

من المفترض أن يكون شريط أدوات الفلاتر مفعّلاً تلقائيًا. في حال عدم توفر ذلك، يُرجى اتباع ما يلي:

1. انقر على الفلتر filter_alt لإظهاره.

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

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

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

   

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

   

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

   

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

   

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

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

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

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

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

   

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

   

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

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

حظر الطلبات

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

1. اضغط على Ctrl ‏+ Shift ‏+ P أو Command ‏+ Shift ‏+ P (على أجهزة Mac) لفتح قائمة الأوامر.

   

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

   

3. انقر على الزر إضافة نمط.

4. اكتب main.css.

   

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

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

   

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

للتعرّف على المزيد من ميزات DevTools ذات الصلة بفحص نشاط الشبكة، اطّلِع على مرجع الشبكة.