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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

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

   

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

   

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

   

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

   

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

   

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

   

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

   

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

   

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

   

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

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

   

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. أزِل العلامة من مربّع الاختيار تفعيل حظر الطلبات.

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