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

جيف بوسنيك

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

الانتقال إلى لوحة الشبكة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بعد أن يتوفر لتطبيق الويب موقع للعمل به، يؤدي النقر على البحث عن إدخالات Wikipedia القريبة إلى العديد من طلبات الشبكة الإضافية. يُفترض أن ترى شيئًا مثل هذا:

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

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

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

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

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

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

وخلاصة القول

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

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

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

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