معاينة رسائل HTTP عملياًInspecting HTTP Messages

تعرّفنا في الدرس السابق على البنية المعمارية لرسائل بروتوكول HTTP من سطر البداية ورؤوس الرسالة والسطر الفارغ الفاصل وصولاً إلى جسم الرسالة. غير أن فهم القواعد النظرية وحده لا يكفي في بيئة العمل الحقيقية؛ فالمتصفح يخفي هذه الرسائل خلف واجهة رسومية أنيقة. وحتى تتمكن من تشخيص سبب فشل طلب معين، أو تأخر تحميل مورد، أو حدوث إعادة توجيه خاطئة، لا بد أن تتقن مهارة معاينة رسائل HTTP الحية عملياً أثناء انتقالها الفعلي بين العميل والخادم باستخدام لوحة الشبكة في أدوات المطور () وأداة سطر الأوامر cURL.

قبل الغوص في التفاصيل الهندسية، استعرض جدول المصطلحات التقنية الأساسية لهذا الدرس:

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

• 1. التحقق مما أرسله العميل فعلياً: التأكد من طريقة الطلب ( أو )، والمسار الدقيق للرابط، والمعلمات المرسلة، ورؤوس الطلب التي أضافها المتصفح.
• 2. قراءة حكم الخادم الصريح: معرفة رمز الحالة الفعلي (مثل أو أو أو ) وفحص محتوى الاستجابة الخام قبل أن تعالجه واجهة الصفحة.
• 3. مراجعة التخزين المؤقت وضوابط الأمان: معرفة ما إذا كان الملف قد جُلب من الشبكة أم من الذاكرة المحلية، وفحص رؤوس الأمان والكوكيز مثل .
• 4. تشخيص اختناقات الأداء والبطء: قياس الزمن المستغرق بالملي ثانية في انتظار أول بايت من الخادم () مقارنة بزمن تنزيل الملفات الكبيرة.

يأتي كل متصفح ويب حديث على الحاسوب—سواء كان Google Chrome أو Microsoft Edge أو Mozilla Firefox أو Apple Safari—مزوداً بحزمة مدمجة من أدوات المطورين (). وداخل هذه الحزمة تمثّل لوحة الشبكة () الصندوق الأسود الذي يسجل كل حركة اتصال لحظة بلحظة.

يمكنك فتح لوحة الشبكة في أي صفحة ويب عبر إحدى الطرق القياسية الآتية:

• اختصار لوحة المفاتيح (في أنظمة Windows وLinux): اضغط على مفتاح أو الاختصار ، ثم انتقل إلى تبويب Network في الشريط العلوي.
• اختصار لوحة المفاتيح (في نظام macOS): اضغط على الاختصار ثم اختر تبويب Network.
• القائمة السياقية للفأرة: انقر بزر الفأرة الأيمن في أي مكان داخل الصفحة، واختر فحص ()، ثم انتقل إلى تبويب Network.

بمجرد تحديث الصفحة ولوحة الشبكة مفتوحة، يظهر كل مورد يطلبه المتصفح في سطر مستقل مرتب زمنياً داخل جدول الطلبات () مع شريط ملخص إحصائي في أسفل اللوحة:

• الاسم (): اسم الملف أو المسار المطلوب (مثل أو أو )، ويكون مستند الرئيسي دائماً هو السطر الأول في الأعلى.
• طريقة الطلب (): الفعل المستخدم في الطلب مثل أو (وإذا لم يكن العمود ظاهراً، انقر بزر الفأرة الأيمن على شريط عناوين الأعمدة وفعّل خيار Method).
• رمز الحالة (): كود استجابة الخادم مثل أو أو ، وتظهر الأخطاء باللون الأحمر لسهولة اكتشافها.
• النوع (): تصنيف المورد بناءً على حقل الرأس مثل مستند () أو تنسيق () أو طلب خلفية ().
• المُسبِّب (): يوضح الجهة التي أطلقت الطلب؛ هل هو محلل الصفحة () أثناء قراءة وسم صورة، أم سطر برمجي محدد.
• الحجم (): يعرض حجم البايتات المضغوطة المنقولة فعلياً عبر الشبكة وحجم الملف الأصلي بعد فك الضغط، أو يوضح أنه جُلب من الذاكرة المحلية ().
• الزمن ومخطط الشلال (): المدة الكلية للطلب بالملي ثانية، مع شريط بصري يفصّل مراحل الاتصال وانتظار أول بايت () وتنزيل المحتوى.

تأمل المخطط التوضيحي الآتي الذي يشرح أعمدة جدول الطلبات في لوحة الشبكة وشريط الملخص السفلي:

يضم الشريط العلوي من لوحة الشبكة أربعة مفاتيح تحكم رئيسية تضبط طريقة التقاط الرسائل أثناء الفحص والتجريب:

• 1. زر التسجيل () وزر المسح (): طالما كانت الدائرة حمراء مضيئة فالمتصفح يسجل كل طلب جديد. أما زر المسح فينظف الجدول الحالي تماماً لتتمكن من مراقبة طلب واحد فقط عند النقر على زر معين في الصفحة دون ازدحام.
• 2. خيار الاحتفاظ بالسجل (): يمسح المتصفح جدول الشبكة تلقائياً عند الانتقال إلى صفحة أخرى أو حدوث إعادة توجيه (). عند تفعيل مربع Preserve log يحتفظ الجدول بجميع الطلبات السابقة عبر تنقلات الصفحات المتتالية، وهو خيار لا غنى عنه عند فحص عمليات تسجيل الدخول وإعادة التوجيه.
• 3. خيار تعطيل الذاكرة المؤقتة (): يُجبر المتصفح (أثناء بقاء أداة المطور مفتوحة فقط) على تجاهل النسخ المخزنة محلياً وطلب كل ملف من الخادم مباشرة كزائر جديد تماماً.
• 4. محاكاة سرعة الاتصال (): قائمة منسدلة تتيح لك محاكاة شبكات الهواتف البطيئة ( أو ) أو انقطاع الإنترنت () لاختبار كفاءة تحميل الموقع في ظروف الاتصال الضعيفة.

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

1. 1. تبويب الرؤوس (): يعرض ثلاثة أقسام منظمة: ملخص عام ( يضم الرابط وطريقة الطلب ورمز الحالة وعنوان للخادم)، ورؤوس الاستجابة ()، ورؤوس الطلب ().
2. 2. تبويب الحمولة المرسلة (): يعرض البيانات التي أرسلها العميل إلى الخادم، سواء كانت معلمات استعلام في الرابط () أو بيانات داخل جسم الطلب ().
3. 3. تبويب المعاينة المنسقة (): يعرض جسم استجابة الخادم بصورة مرئية منسقة ويسيرة القراءة، مثل عرض كائنات كشجرة قابلة للطي أو عرض الصور المصغرة.
4. 4. تبويب الاستجابة الخام (): يعرض النص الخام الفعلي لجسم الاستجابة كما وصل من الخادم حرفياً دون تجميل.
5. 5. تبويب المُسبِّب (): يعرض التسلسل الكامل للنداءات البرمجية التي أدت إلى إرسال هذا الطلب.
6. 6. تبويبا التوقيت والكوكيز (): يفصّل تبويب كل جزء من الثانية في رحلة الاتصال (فحص ، مصافحة ، زمن انتظار أول بايت ، وزمن التنزيل)، بينما يعرض تبويب القيم المرسلة والمستلمة في جدول واضح.

جرّب المحاكي التفاعلي الآتي لاستكشاف التبويبات الفرعية لفحص طلب HTTP حقيقي داخل أدوات المطور:

قد يطلق فتح صفحة ويب حديثة واحدة ما بين 80 إلى 200 طلب HTTP منفصل لجلب الخطوط والأيقونات وملفات التنسيق وطلبات الخلفية. وللوصول الفوري إلى الطلب الذي تبحث عنه دون ضياع وسط مئات الأسطر، توفر لوحة الشبكة نظام فلترة مزدوجاً فائق الدقة:

• 1. أزرار التصنيف السريع حسب نوع المورد: يمكنك النقر على أزرار الفلترة الجاهزة في أعلى الجدول لعزل فئة محددة:
  • : يعرض طلبات مستندات الأساسية فقط.
  • : يعزل طلبات البيانات الخلفية () فقط، وهو الفلتر الأكثر استخداماً عند فحص التطبيقات التفاعلية.
  • و و و: لعزل ملفات التنسيق أو السكربتات أو الصور أو الخطوط.
• 2. معاملات الفلترة المتقدمة في مربع : يمكنك كتابة تعبيرات بحث ذكية داخل خانة الفلترة لاقتناص طلبات محددة بدقة كما في الأمثلة القياسية الآتية:

يخلط كثير من المتعلمين بين خانة الفلترة () وبين نافذة البحث الشامل في الشبكة ()، والفرق الهندسي بينهما جوهري:

• خانة الفلترة (): تبحث في أسماء الملفات وعناوين الروابط الظاهرة في الجدول أو عبر معاملات الفلترة فقط، ولا تفتش داخل نصوص الاستجابات.
• نافذة البحث الشامل ( عبر أيقونة العدسة المكبرة أو الضغط على داخل لوحة الشبكة): تفتش داخل المحتوى الكامل لجميع رسائل HTTP المسجلة، بما في ذلك أسماء وقيم حقول الرأس، ونصوص أجسام الاستجابة ( و و).

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

إلى جانب أدوات المطور الرسومية في المتصفح، يحتاج المهندس دائماً إلى أداة سطر أوامر سريعة ومباشرة لمعاينة رسائل HTTP بمعزل عن إضافات المتصفح وذاكرته المؤقتة. هذه الأداة القياسية العالمية هي cURL ()، وهي مثبتة مسبقاً في أنظمة Windows 10/11 وmacOS وLinux.

تمنحك أربعة خيارات أساسية في أداة تحكماً كاملاً في معاينة الرسائل النصية الخام:

• الخيار (جلب الرؤوس فقط): يرسل طلب ويعرض سطر حالة الاستجابة وحقول الرأس فقط دون تنزيل جسم الصفحة.
• الخيار (عرض رؤوس الاستجابة مع الجسم): يرسل طلب كامل ويعرض رؤوس الاستجابة متبوعة بجسم الرسالة معاً.
• الخيار (الفحص التفصيلي الكامل ): يعرض تفاصيل الاتصال ()، وكل سطر يرسله العميل مسبوقاً بالعلامة ، وكل سطر يستقبله من الخادم مسبوقاً بالعلامة .
• الخيار (تتبع إعادة التوجيه): يوجه الأداة لتتبع رؤوس تلقائياً عند استلام رموز إعادة التوجيه () حتى الوصول للوجهة النهائية.

لاحظ في المثال الآتي كيف يكشف الأمر أسطر الطلب الصادرة () وأسطر الاستجابة الواردة () بوضوح تام:

من أقوى المهارات العملية التي تجمع بين دقة المتصفح ومرونة سطر الأوامر ميزة نسخ الطلب كأمر cURL ().

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

عندما تتعاون مع زميلك في الفريق لتشخيص مشكلة معقدة في الشبكة، يمكنك تصدير سجل الجلسة بالكامل في ملف قياسي يُسمى ملف أرشيف HTTP () عبر النقر على أيقونة التصدير () في شريط لوحة الشبكة. يُحفظ هذا الملف بصيغة منظمة تحتوي على كل طلب واستجابة ورأس وتوقيت زمني تم تسجيله.

غير أن التعامل مع ملفات HAR وأوامر Copy as cURL يتطلب وعياً أمنياً صارماً للغاية:

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