انتقل إلى المحتوى الرئيسي

الوحدة 5 · اختبار تطبيقات الويب

أدوات المطوّر وطلبات الشبكة

اقرأ ما ترسله الصفحة وما تستقبله، وحوّله إلى أدلة.

نحو 10 دقيقة قراءة و15 دقيقة تطبيق (تقديرات)

جارٍ تحميل التقدم…

اقرأ

أهداف التعلّم

  • فتح أدوات المطوّر وإيجاد لوحات Console وNetwork وApplication.
  • فحص طريقة الطلب وحالته وترويساته وحمولته واستجابته.
  • استخدام أدلة الشبكة لتحديد ما إذا كان الخطأ في الواجهة الأمامية أم الخلفية.

الشرح

يتضمن كل متصفح حديث أدوات للمطورين (F12، أو Ctrl+Shift+I / Cmd+Option+I). وبالنسبة للمختبرين، تهم ثلاث لوحات أكثر من غيرها:

  • Console: أخطاء JavaScript وتحذيراته. والخطأ الأحمر عند الضغط على زر دليل قيّم.
  • Network: كل طلب تجريه الصفحة. اختر طلباً لترى طريقته وعنوانه ورمز حالته وترويسات الطلب والاستجابة والحمولة وجسم الاستجابة والتوقيت. فعّل «Preserve log» لتبقى الطلبات بعد الانتقال بين الصفحات، واستخدم تقييد السرعة لمحاكاة اتصال بطيء.
  • Application (أو Storage في Firefox): ملفات تعريف الارتباط والتخزين المحلي وتخزين الجلسة للموقع.

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

مثال: طلب إضافة إلى السلة فشل

توضيحي — ليس عنوان API يعمل فعلاً.

POST /v1/cart/items HTTP/1.1
Host: api.dar-al-souq.example
Content-Type: application/json

{"productId": "leather-journal", "quantity": 0}

HTTP/1.1 422 Unprocessable Content
Content-Type: application/json

{"error": "quantity must be between 1 and 10"}
طلب توضيحي على واجهة برمجة وهمية. أرسلت الصفحة الكمية 0، لذا فالخطأ في الواجهة الأمامية رغم أن واجهة البرمجة هي التي أعادت الخطأ.

أخطاء شائعة

  • الإبلاغ بأن «لا شيء يحدث» دون فحص لوحتي Console وNetwork.
  • فقدان الطلبات لأن «Preserve log» كان معطلاً أثناء إعادة التوجيه.
  • لصق طلبات كاملة تحتوي على رموز مصادقة أو ملفات تعريف ارتباط في بلاغ الخطأ — احجبها.

جرّب

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

تمرين

الضغط على «حفظ» لا يُظهر أي خطأ، لكن تغييرك يضيع بعد التحديث. في لوحة Network أعاد طلب الحفظ الرمز 200 وحمولته تحتوي على القيمة القديمة. أين يكون الخطأ على الأرجح؟

اختر إجابة واحدة.

راجع

اختبر نفسك — يجب أن تكون الآن قادراً على:

  • فتح أدوات المطوّر وإيجاد لوحات Console وNetwork وApplication.
  • فحص طريقة الطلب وحالته وترويساته وحمولته واستجابته.
  • استخدام أدلة الشبكة لتحديد ما إذا كان الخطأ في الواجهة الأمامية أم الخلفية.

تدرّب في مختبر الجودة

مراجع

تابع

عندما تكون مستعداً، ضع علامة الإكمال على الدرس في خطوة «جرّب» ثم انتقل إلى التالي.

يُوسم بأنه مقروء عندما تصل إلى نهاية الدرس.