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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

    الموقع الإلكتروني التجريبي

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

    العرض التوضيحي في نافذة واحدة وهذا الدليل التعليمي في نافذة أخرى

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

    لوحة Console في أدوات المطوّرين

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

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

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

    لوحة "شبكة أدوات المطوّرين" تم إرساءها في أسفل النافذة

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

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

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

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

    سجلّ الشبكة يتضمّن 5 طلبات

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

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

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

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

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

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

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

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

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

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

    تفعيل عمود "النطاق"

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

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

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

    القائمة المنسدلة لضبط الحدّ الأقصى المسموح به لعرض نطاق الشبكة في لوحة "الشبكة"

  2. اختَر 3G.

    اختيار شبكة الجيل الثالث في لوحة "الشبكة"

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

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

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

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

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

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

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

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

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

    لقطات شاشة لتحميل الصفحة في لوحة "الشبكة"

  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 التي تعثر عليها في عناوين الموارد أو محتواها.

    نتائج البحث عن Cache-Control

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

    نتيجة بحث تم تمييزها في علامة التبويب "العناوين"

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

    أزرار الإغلاق

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

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

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

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

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

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

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

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

    تظهر نتائج فلترة السلاسل في سجلّ الشبكة.

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

    نتائج فلتر التعبير العادي في سجلّ الشبكة

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

    تظهر نتائج الفلترة السلبية في سجلّ الشبكة.

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

    تظهر نتائج فلترة المواقع في سجلّ "الشبكة".

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

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

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

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

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

    لوحة الشبكة تعرض ملفات CSS فقط.

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

    لوحة الشبكة تعرض ملفات CSS وJS فقط

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

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

حظر الطلبات

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

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

    قائمة الأوامر في لوحة "الشبكة"

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

    خيار "عرض أداة حظر الطلبات"

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

  4. اكتب main.css.

    حظر main.css في لوحة "الشبكة"

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

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

    تم حظر main.css.

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

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