گفتن به فروشندگان مرورگر در مورد مشکلاتی که در مرورگر آنها پیدا می کنید، بخش جدایی ناپذیری از بهبود پلت فرم وب است!
ثبت یک باگ خوب کار سختی نیست، اما کمی کار می خواهد. هدف این است که پیدا کردن چیزی که شکسته است، رسیدن به علت اصلی و مهمتر از همه، یافتن راهی برای رفع آن آسان باشد. اشکالاتی که به سرعت پیشرفت می کنند معمولاً به راحتی با یک رفتار مورد انتظار واضح بازتولید می شوند.
بررسی کنید که یک اشکال است
اولین قدم این است که بفهمیم رفتار «صحیح» باید چه باشد.
رفتار صحیح چیست؟
اسناد API مربوطه را در MDN بررسی کنید یا سعی کنید مشخصات مرتبط را پیدا کنید. این اطلاعات می تواند به شما کمک کند تصمیم بگیرید کدام API واقعاً خراب است، کجا خراب است و رفتار مورد انتظار چیست.
آیا در مرورگر دیگری کار می کند؟
رفتاری که بین مرورگرها متفاوت است، معمولاً به عنوان یک مسئله قابلیت همکاری اولویت بیشتری دارد، به خصوص زمانی که مرورگر حاوی اشکال، یک مورد عجیب و غریب باشد. سعی کنید آخرین نسخه های کروم، فایرفاکس، سافاری و اج را تست کنید، احتمالاً با استفاده از ابزاری مانند BrowserStack .
در صورت امکان، بررسی کنید که صفحه عمداً به دلیل بوییدن عامل کاربر رفتار متفاوتی نداشته باشد. در Chrome DevTools، رشته User-Agent را روی مرورگر دیگری تنظیم کنید .
آیا در نسخه اخیر شکسته شد؟
آیا این کار همانطور که در گذشته انتظار می رفت کار می کرد، اما در نسخه اخیر مرورگر شکسته شد؟ چنین "رگرسیون هایی" را می توان بسیار سریعتر انجام داد، به خصوص اگر شماره نسخه را در جایی که کار می کند و نسخه ای را که در آن شکست خورده است ارائه دهید. ابزارهایی مانند BrowserStack می‌توانند بررسی نسخه‌های قدیمی مرورگر را آسان کنند و ابزار bisect-builds (برای Chromium) امکان جستجوی تغییرات را بسیار کارآمد می‌کند.
اگر مشکلی یک رگرسیون باشد و بتوان آن را بازتولید کرد، معمولاً می توان علت اصلی را پیدا کرد و به سرعت برطرف کرد.
آیا دیگران هم همین مشکل را می بینند؟
اگر با مشکلاتی روبرو هستید، احتمال زیادی وجود دارد که توسعه دهندگان دیگر نیز با مشکل مواجه شوند. ابتدا، باگ را در Stack Overflow جستجو کنید. این ممکن است به شما کمک کند یک مشکل انتزاعی را به یک API شکسته خاص ترجمه کنید، و ممکن است به شما کمک کند تا یک راه حل کوتاه مدت پیدا کنید تا این باگ برطرف شود.
آیا قبلا گزارش شده است؟
هنگامی که ایده ای در مورد این باگ پیدا کردید، وقت آن است که بررسی کنید که آیا باگ قبلاً با جستجو در پایگاه داده اشکال مرورگر گزارش شده است یا خیر.
- مرورگرهای مبتنی بر Chromium: https://crbug.com
- فایرفاکس: https://bugzilla.mozilla.org/
- مرورگرهای مبتنی بر سافاری و وب کیت: https://bugs.webkit.org/
اگر اشکال موجودی پیدا کردید که مشکل را توضیح می‌دهد، پشتیبانی خود را با ستاره‌گذاری، به‌عنوان موارد دلخواه یا نظر دادن در مورد اشکال اضافه کنید. و در بسیاری از سایت‌ها، می‌توانید خود را به لیست CC اضافه کنید و در صورت تغییر باگ، به‌روزرسانی‌ها را دریافت کنید.
اگر تصمیم دارید در مورد باگ نظر بدهید، اطلاعاتی در مورد نحوه تأثیر این اشکال بر روی وب سایت خود وارد کنید. از افزودن نظرات به سبک «+1» خودداری کنید، زیرا ردیاب‌های اشکال معمولاً برای هر نظر ایمیل ارسال می‌کنند.
اشکال را گزارش کنید
اگر این اشکال قبلاً گزارش نشده است، وقت آن رسیده است که آن را به فروشنده مرورگر اطلاع دهید.
یک مورد آزمایشی کوچک شده ایجاد کنید
موزیلا یک مقاله عالی در مورد نحوه ایجاد یک تست کوچک شده دارد. برای کوتاه کردن یک داستان طولانی، در حالی که شرح مشکل شروعی عالی است، هیچ چیز بهتر از ارائه یک نسخه نمایشی مرتبط در باگ است که مشکل را نشان می دهد. برای به حداکثر رساندن شانس پیشرفت سریع، مثال باید حاوی حداقل کد ممکن مورد نیاز برای نشان دادن مشکل باشد. حداقل نمونه کد اولین کاری است که می توانید انجام دهید تا احتمال رفع اشکال خود را افزایش دهید.
در اینجا چند نکته برای به حداقل رساندن یک مورد آزمایشی وجود دارد:
- صفحه وب را دانلود کنید،
<base href="https://original.url">را اضافه کنید و بررسی کنید که اشکال به صورت محلی وجود دارد. اگر URL از HTTPS استفاده می کند، ممکن است به سرور HTTPS زنده نیاز داشته باشد. - فایل‌های محلی را در آخرین نسخه‌های هر تعداد مرورگر که می‌توانید آزمایش کنید.
- سعی کنید همه چیز را در 1 فایل فشرده کنید.
- کد را حذف کنید (شروع با چیزهایی که می دانید غیر ضروری هستند) تا زمانی که اشکال برطرف شود.
- از کنترل نسخه استفاده کنید تا بتوانید کار خود را ذخیره کنید و مواردی را که اشتباه پیش می‌روند لغو کنید.
میزبانی یک مورد آزمایش کوچک
اگر به دنبال یک مکان خوب برای میزبانی از کیس تست کوچک خود هستید، چندین مکان خوب در دسترس است:
توجه داشته باشید که تعدادی از آن سایت ها محتوا را در iframe نمایش می دهند که ممکن است باعث شود ویژگی ها یا اشکالات رفتار متفاوتی داشته باشند.
پرونده خود را
هنگامی که مورد آزمایشی کوچک شده خود را دریافت کردید، آماده هستید تا آن اشکال را ثبت کنید. به سایت مناسب ردیابی اشکال بروید و یک مشکل جدید ایجاد کنید.
- مرورگرهای مبتنی بر Chromium - https://crbug.com/new
- فایرفاکس - https://bugzilla.mozilla.org/
- مرورگرهای مبتنی بر سافاری و وب کیت - https://bugs.webkit.org/
شرح واضح و مراحل لازم برای بازتولید مسئله را ارائه دهید
ابتدا، توضیح واضحی ارائه دهید تا به مهندسان کمک کند تا سریعاً مشکل را بفهمند و به تریاژ مشکل کمک کنند.
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 پایین یا dpi بالا) قابل تکرار هستند. اطمینان حاصل کنید که جزئیات هر محیط آزمایشی را که استفاده کرده اید درج کنید.
اشکال را ارسال کنید
در نهایت، اشکال را ارسال کنید. سپس، به یاد داشته باشید که برای هر گونه پاسخ به اشکال، مراقب ایمیل خود باشید. معمولاً در طول بررسی و هنگام رفع اشکال، مهندسان ممکن است سؤالات دیگری داشته باشند، یا اگر در بازتولید مشکل مشکل داشته باشند، ممکن است با آنها تماس بگیرند.