أدوات المطوّرين في المتصفح للمختبِرين

لماذا يهم

ما تراه على الشاشة إخفاق (failure)، أما العيب (defect) الذي يسببه ففي شيفرة الصفحة أو في الخادم أو في البيانات. التقرير الذي يقول «الحفظ لا يعمل» يجعل المطوّر يبدأ من الصفر. أما «زر الحفظ يرسل PATCH /api/v1/profile، والخادم يجيب بالرمز 422، والصفحة تعرض رسالة نجاح رغم ذلك» فيخبر الفريق مسبقاً أن الخادم رفض المدخل وأن الصفحة تجاهلت الرفض.

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

سؤال واحد لكل لوحة

ست لوحات تغطي معظم عمل الاختبار. يستخدم هذا الدرس أسماءها في Chrome؛ وأدوات المطوّرين في Edge مبنية على شيفرة Chromium نفسها، فتتطابق الأسماء والترتيب في كل موضع تقريباً. ولدى Firefox وSafari الأدوات نفسها، وبعضها بأسماء أخرى: Inspector بدلاً من Elements في Firefox، وStorage بدلاً من Application وResponsive Design Mode بدلاً من شريط أدوات الأجهزة في كليهما. افتح اللوحة التي يطابق سؤالها العَرَض الذي أمامك.

• العناصر (Elements): ما الموجود في الصفحة الآن، ولماذا يبدو هكذا؟
• وحدة التحكم (Console): هل فشلت شيفرة الصفحة، وماذا قالت؟
• الشبكة (Network): ماذا أرسل المتصفح، وبماذا عاد الرد، وكم استغرق؟
• التطبيق (Application): ماذا يخزّن هذا الموقع في متصفحي؟
• الأداء (Performance): أين يذهب الوقت أثناء التحميل أو النقر؟
• شريط أدوات الأجهزة (Device toolbar): كيف يتجاوب التخطيط مع شاشة بحجم الهاتف ومع اللمس؟

العناصر ووحدة التحكم: الصفحة وشيفرتها

تُظهر لوحة العناصر نموذج DOM الحي، كما في درس نموذج DOM. اختر عُقدة فيعرض جزء الأنماط (Styles) قواعد CSS المطبّقة عليها، مع شطب التصريحات التي تغلبها قواعد أخرى؛ وبهذا ترى لماذا يظهر الزر رمادياً أو لماذا يُقصّ نص التسمية. ويعرض جزء إمكانية الوصول (Accessibility) دورها المحسوب واسمها القابل للوصول (accessible name)، أي الاسم الذي يعلنه قارئ الشاشة.

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

وتعرض وحدة التحكم أخطاء JavaScript وتحذيراتها، والموارد التي فشل تحميلها، والرسائل الأمنية، ومعظمها مرتبط بالملف والسطر أو بالعنوان الذي صدر منه. ويمكنك أيضاً كتابة تعبيرات تسأل بها الصفحة، كما في الأمثلة أدناه. ولا تلصق أبداً شيفرة لا تفهمها: فهي تعمل بجلسة تسجيل دخولك. وانتبه إلى حدٍّ واحد: يختصر Chrome قيمة navigator.userAgent إلى الإصدار الرئيسي متبوعاً بـ.0.0.0 وإلى إصدار ثابت لنظام التشغيل، فخذ الإصدار الدقيق للمتصفح من صفحة «About» (حول).

$0                            // the element selected in Elements
$0.disabled                   // is that button disabled right now?
$$('img:not([alt])').length   // images without an alt attribute
navigator.userAgent           // browser and OS; Chrome gives the major version only

جرّبها: محلّل User-Agent

الشبكة: ماذا أُرسل وماذا عاد

تسجّل لوحة الشبكة كل طلب يحدث ما دامت أدوات المطوّرين مفتوحة، مع رمز حالته ونوعه ومُطلِقه (initiator) وحجمه ومدته. انقر على طلب لترى ترويساته، والحمولة (payload) التي أرسلتها الصفحة، والاستجابة، والتوقيت.

طلب واحد يخبرك أيّ جانب تشكّ فيه. بيانات خاطئة في الطلب: انظر في الصفحة. طلب صحيح واستجابة خاطئة: انظر في الخادم. كلاهما صحيح والشاشة خاطئة: انظر في طريقة تعامل الصفحة مع الاستجابة. والطلب الذي لم يتلقَّ رداً يظهر بالقيمة (failed) بدلاً من رمز الحالة.

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

• «Preserve log» للإبقاء على القائمة عند انتقال الصفحة، كما بعد إرسال نموذج.
• «Disable cache» لتتجاوز الطلبات ذاكرة HTTP المؤقتة في المتصفح ما دامت أدوات المطوّرين مفتوحة. وتبقى ملفات تعريف الارتباط والبيانات المخزّنة وأي عامل خدمة (service worker)، فلرؤية الموقع كما يراه زائر يفتحه أول مرة استخدم نافذة خاصة.
• الإبطاء (Throttling) لمحاكاة اتصال بطيء أو انقطاع الاتصال، ورؤية حالات التحميل والخطأ.
• مرشّح «Fetch/XHR» لإخفاء الملفات الثابتة والإبقاء على الطلبات التي تحمل البيانات.
• «Copy as cURL»، الذي يحوّل الطلب إلى أمر للبرنامج curl، وهو برنامج سطر أوامر يرسل طلبات HTTP، ليعيد المطوّر إرسال ما أُرسل بالضبط. يحتوي الأمر على ملفات تعريف الارتباط وترويسة Authorization: احذفها قبل مشاركته.
• «Export HAR» لحفظ كل الطلبات المعروضة في ملف واحد يُرفق بتقرير الخطأ. يستبعد Chrome افتراضياً الترويسات Cookie وSet-Cookie وAuthorization، لكن أجسام الطلبات والاستجابات قد تظل تحمل بيانات شخصية.

جرّبها: محلّل أوامر cURL جرّبها: محلّل ترويسات HTTP جرّبها: منسّق JSON

التطبيق والأداء وشريط أدوات الأجهزة

تُظهر لوحة التطبيق ما يخزّنه الموقع في متصفحك: ملفات تعريف الارتباط بسماتها (HttpOnly وSecure وSameSite وتاريخ الانتهاء، ويشرحها درس ملفات تعريف الارتباط وتخزين الويب)، والتخزين المحلي (local storage) وتخزين الجلسة (session storage)، وIndexedDB، وعمّال الخدمة (service workers). يمكنك تعديل المدخلات أو حذفها، أو مسح بيانات الموقع لتبدأ من جديد. ومن الفحوص المعتادة: هل اختفى ملف تعريف ارتباط الجلسة، وهو الذي يُبقيك مسجّل الدخول، بعد تسجيل الخروج؟

وتسجّل لوحة الأداء تحميلاً أو تفاعلاً، وتُظهر ما كان يفعله الخيط الرئيسي (main thread) في المتصفح. تُعلَّم المهام الطويلة (long tasks)، أي التي تتجاوز 50 ms، بالأحمر، ولإزاحات التخطيط (layout shifts) مسار خاص بها، وهذا يفسّر نقرة تستجيب متأخرة أو محتوى يقفز. ونتائج حاسوبك قياسات مخبرية، لا تجربة مستخدميك.

ويحاكي شريط أدوات الأجهزة منفذ عرض (viewport) هاتف أو جهاز لوحي، ونسبة البكسل فيه، وأحداث اللمس، ومع اختيار جهاز جاهز وكيلَ المستخدم (user agent) الخاص به. إنه فحص أولي سريع للتخطيط، لكن المحرك والمعالج والخطوط تبقى خاصة بمتصفح حاسوبك؛ فأكّد النتائج المهمة على جهاز حقيقي. ويفصّل درس اختبار التصميم المتجاوب حدوده في قسم «ما يستطيع شريط أدوات الأجهزة إخبارك به وما لا يستطيع».

جرّبها: محلّل ملفات تعريف الارتباط (Cookies)

مثال تطبيقي: «تم الحفظ» ولم يُحفظ شيء

في بيئة Staging، تغيّر مختبِرة رقم الهاتف إلى +966 50 123 4567، وتنقر «حفظ» فترى «تم حفظ الملف الشخصي»؛ وبعد إعادة التحميل يعود الرقم القديم. وبدلاً من الإبلاغ بأن «الحفظ لا يعمل»، تفعّل «Preserve log» وتختار مرشّح «Fetch/XHR» وتكرّر الخطوات:

• حمل طلب PATCH (طريقة HTTP لتعديل جزء من مورد) الرقم الجديد: أي أن النموذج جمع المدخل بشكل صحيح.
• أجاب الخادم بالرمز 422 (Unprocessable Content في RFC 9110)، أي أنه رفض البيانات: لم يُحفظ شيء، كما يؤكد طلب GET بعد إعادة التحميل.
• ومع ذلك عرضت الصفحة رسالة نجاح، فهي إذن لا تتحقق من رمز حالة الاستجابة؛ وكما في درس أساسيات JavaScript، فالرد من الفئة 4xx لا يجعل fetch() يفشل. هذا عيب في الصفحة.
• هل يُسمح بالمسافات في رقم الهاتف؟ المتطلب هو الذي يحدد هل في تحقق الخادم من المدخل عيب ثانٍ.
• يصف التقرير عيب الصفحة، ويطرح سؤال صيغة رقم الهاتف، ويُرفق لقطة الشاشة والطلب والاستجابة، دون ملف تعريف ارتباط الجلسة.

Console   (no errors)

Network   Fetch/XHR, Preserve log on
  PATCH  https://staging.example.com/api/v1/profile
  Status:    422
  Payload:   {"phone":"+966 50 123 4567"}
  Response:  {"field":"phone","message":"Invalid phone format"}

  GET    https://staging.example.com/api/v1/profile    (after reload)
  Status:    200
  Response:  {"name":"Sara","phone":"+966501112233"}

جرّبها: مرجع رموز حالة HTTP

أسئلة شائعة

المراجع

• What are browser developer tools? — MDNMDN Web Docs (Mozilla)مقدمة لأدوات المطوّرين المدمجة في المتصفحات — المفتّش ووحدة تحكم JavaScript ومصحّح الأخطاء — لفحص الصفحة أثناء اختبارها.
• RFC 9110: HTTP SemanticsIETF · 2022معاني أساليب HTTP وحقول الترويسات ورموز الحالة والتفاوض على المحتوى، بغضّ النظر عن إصدار البروتوكول.
• Using HTTP cookies — MDNMDN Web Docs (Mozilla)عمر ملف تعريف الارتباط ونطاقه وسمات Secure/HttpOnly/SameSite وآثارها الأمنية.
• ISTQB GlossaryISTQBالتعريفات القياسية لمصطلحات الاختبار — حالة الاختبار واختبار الانحدار والخطورة والأولوية وتحليل القيم الحدّية وغيرها.