استكشاف لوحة شبكة "أدوات مطوري البرامج"

Jeff Posnick

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

الانتقال إلى "لوحة الشبكة" (Network Panel)

انتقِل إلى لوحة "الشبكة" للاطّلاع على حركة بيانات الشبكة في العرض التوضيحي. التطبيق.

1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة

2. اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".

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

4. أعِد تحميل الصفحة للاطّلاع على حركة بيانات الشبكة.

تعرض لوحة "الشبكة" جميع الأصول التي تم تحميلها بسبب التنقل:

كيفية تفسير الإدخالات

يمثل كل صف من حركة بيانات الشبكة المسجلة طلبًا واستجابة واحدة

يمثل الصف الأول بالنوع document طلب التنقل الأولي HTML الخاص بتطبيق الويب. هذا هو مصدر الشلال؛ كل من القيم التالية طلبات الأصول الإضافية (المعروفة باسم الموارد الفرعية للمستند الرئيسي) من المصدر الأصلي.

الصفان الثاني والثالث يعرضان stylesheet لخدمة مقارنة الأسعار ومورد فرعي script قيد التحميل، هي طلبات تابعة بدأها المستند الرئيسي.

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

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

إنشاء بعض طلبات بيئة التشغيل الإضافية

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

يمكنك تشغيل هذه الطلبات الإضافية من خلال النقر على البحث عني في التطبيق ثم سماح في النافذة المنبثقة التي تظهر سيسمح هذا الإجراء للموقع الإلكتروني بالوصول إلى موقعك الجغرافي الحالي:

بعد تحديد موقع لتطبيق الويب للعمل معه، انقر على العثور على الأجهزة المجاورة. ينتج عن إدخالات Wikipedia عدة طلبات إضافية للشبكة. إِنْتَ شيء مثل هذا:

تفسير الإدخالات الجديدة

كما في السابق، يمثل كل صف من حركة بيانات الشبكة المسجلة طلبًا واحدًا والاستجابة.

يمثل الصف الأول من الإدخالات الجديدة طلبًا من النوع fetch، والذي يتجاوب مع الطريقة التي يطلب بها تطبيق الويب البيانات من واجهة برمجة تطبيقات ويكيبيديا.

جميع الصفوف التالية عبارة عن صور (png أو jpeg) مرتبطة إدخالات ويكيبيديا. رغم أنه من الصعب بعض الشيء أن نرى من لقطة الشاشة، في عمود الشلال مباشرةً من استجابة واجهة برمجة التطبيقات.

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

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

تلخيص الأمور

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

تساعدك لوحة "الشبكة" في الإجابة عن سؤال ما يتم تحميله من خلال عناوين URL في عمود "الاسم" والبيانات في عمود "النوع"، إلى جانب متى يتم تحميله من خلال شاشة العرض الإعلاني بدون انقطاع

لاحظتَ أيضًا أنّ الطلبات التي يتم إجراؤها عن طريق إحدى صفحات الويب يمكن (عادةً) تجميعها في واحدة من الفئتين:

1. إنّ الطلبات الأولية التي يتم إجراؤها بعد الانتقال إلى صفحة جديدة مباشرةً HTML وJavaScript وCSS (وربما مواد عرض أخرى).
2. طلبات بيئة التشغيل التي تم إجراؤها نتيجة لتفاعل المستخدم مع الصفحة. هذا النمط يمكن أن تبدأ بطلب إلى واجهة برمجة تطبيقات، ثم تتدفق إلى طلبات المتابعة بناءً على بيانات واجهة برمجة التطبيقات التي تم استردادها.