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

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

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

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

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

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

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

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

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

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

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

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

إذا كانت المشكلة هي تراجع ويمكن تكراره، فإن السبب الجذري يمكن أن يكون وإصلاحها بسرعة.

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

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

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

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

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

إذا قررت التعليق على الخطأ، فقم بتضمين معلومات حول كيفية حدوث الخطأ في موقعك الإلكتروني. تجنب إضافة "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.

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

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

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

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

إرسال الخطأ

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