كيفية الإبلاغ عن خطأ جيد في المتصفِّح

يُعد إخبار مورّدي المتصفح بالمشكلات التي تجدها في المتصفح جزءًا لا يتجزأ من تحسين النظام الأساسي للويب!

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

التحقّق من أنّه خطأ

الخطوة الأولى هي معرفة الشكل الذي يجب أن يكون عليه السلوك "الصحيح".

ما السلوك الصحيح؟

يُرجى مراجعة مستندات واجهة برمجة التطبيقات ذات الصلة في MDN أو محاولة العثور على المواصفات ذات الصلة. يمكن أن تساعدك هذه المعلومات في تحديد واجهة برمجة التطبيقات التي تم تعطلها بالفعل، ومكان التعطّل، والسلوك المتوقع.

هل تعمل في متصفح آخر؟

يتم بشكل عام إعطاء الأولوية للسلوك الذي يختلف بين المتصفحات بدرجة أكبر من مشكلة إمكانية التشغيل التفاعلي، خاصةً عندما يكون المتصفح الذي يحتوي على الخطأ خطأ غريب. حاول اختبار أحدث إصدارات من Chrome وFirefox وSafari وEdge، مع احتمال استخدام أداة مثل BrowserStack.

إذا أمكن، تحقق من أنّ الصفحة لا تتصرف بشكل مختلف عن قصد بسبب اكتشاف وكيل المستخدم لها. في "أدوات مطوري البرامج في Chrome"، جرِّب ضبط سلسلة User-Agent على متصفّح آخر.

هل تعطّل في إصدار حديث؟

هل كان هذا الأداء متوقعًا في الماضي ولكنه تعطل في إصدار حديث من المتصفح؟ يمكن التعامل مع مثل هذه "الانحدارات" بشكل أسرع بكثير، خاصةً إذا قدّمت رقم إصدار تم تشغيله وإصدارًا لم ينجح فيه. يمكن لأدوات مثل BrowserStack أن تسهل التحقق من إصدارات المتصفحات القديمة، وتتيح أداة إنشاء البندقية (بالنسبة إلى Chromium) البحث عن التغيير بكفاءة بالغة.

إذا كانت المشكلة ترجع إلى تراجع ويمكن تكرارها، يمكن عادةً العثور على السبب الجذري للمشكلة وحلها بسرعة.

هل يرى الآخرون المشكلة نفسها؟

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

هل تم الإبلاغ عنه من قبل؟

بعد تكوين فكرة عن الخطأ، يمكنك التحقّق لمعرفة ما إذا كان قد تم الإبلاغ عن الخطأ من خلال البحث في قاعدة بيانات الأخطاء في المتصفح.

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

إذا قررت التعليق على الخطأ، فقم بتضمين معلومات حول كيفية تأثير الخطأ على موقعك الإلكتروني. تجنَّب إضافة تعليقات بأسلوب " +1"، إذ عادةً ما ترسل برامج تتبُّع الأخطاء رسائل إلكترونية عن كل تعليق.

الإبلاغ عن الخطأ

إذا لم يتم الإبلاغ عن الخطأ من قبل، فقد حان الوقت لإبلاغ بائع المتصفح بشأنه.

إنشاء حالة اختبار مصغّرة

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

في ما يلي بعض النصائح لتقليل حالة الاختبار:

  • نزِّل صفحة الويب وأضِف <base href="https://original.url"> وتحقَّق من وجود الخطأ على الجهاز. وقد يتطلب ذلك خادم HTTPS مباشرًا إذا كان عنوان URL يستخدم HTTPS.
  • اختبِر الملفات المحلية على أحدث إصدارات لأكبر عدد ممكن من المتصفحات.
  • جرِّب اختصار كل العناصر في ملف واحد.
  • قم بإزالة التعليمة البرمجية (بدءًا بالأشياء التي تعرف أنها غير ضرورية) إلى أن يختفي الخطأ.
  • استخدم التحكم في الإصدار حتى تتمكن من حفظ عملك والتراجع عن أي أخطاء.

استضافة حالة اختبار مصغّرة

إذا كنت تبحث عن مكان جيد لاستضافة حالة الاختبار المصغَّرة، هناك العديد من الأماكن الجيدة المتاحة:

وانتبِه إلى أنّ العديد من هذه المواقع الإلكترونية تعرض المحتوى في إطار iframe، ما قد يؤدي إلى اختلاف سلوك الميزات أو الأخطاء.

الإبلاغ عن مشكلتك

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

تقديم وصف واضح والخطوات المطلوبة لإعادة إظهار المشكلة

أولاً، قدم وصفًا واضحًا لمساعدة المهندسين في فهم المشكلة بسرعة والمساعدة في فرز المشكلة.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

بعد ذلك، قدِّم الخطوات التفصيلية المطلوبة لإعادة إظهار المشكلة. وهنا يأتي دور حالة الاختبار المصغر.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

في النهاية، صِف النتيجة المتوقعة والفعلية.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

لمزيد من المعلومات، يمكنك الاطّلاع على إرشادات كتابة تقرير الخطأ على MDN.

ميزة إضافية: أضِف لقطة شاشة أو تسجيلاً رقمي للشاشة للمشكلة.

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

تضمين تفاصيل البيئة

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

إرسال الخطأ

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