گفتن به فروشندگان مرورگر در مورد مشکلاتی که در مرورگر آنها پیدا می کنید، بخش جدایی ناپذیر بهبود پلت فرم وب است.
ثبت یک اشکال خوب اما کمی کار می خواهد. هدف شما باید این باشد که مهندسین مرورگر را تا حد ممکن آسان کنید تا موارد خراب را پیدا کنند، به علت اصلی برسند و مهمتر از همه، راهی برای رفع آن بیابند. اشکالاتی که به سرعت پیشرفت می کنند معمولاً با یک رفتار قابل انتظار واضح به سرعت بازتولید می شوند.
بررسی کنید که یک باگ است
اولین قدم این است که بفهمیم رفتار «صحیح» باید چه باشد.
رفتار صحیح چیست؟
اسناد 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 بالا) قابل تکرار هستند. اطمینان حاصل کنید که جزئیات هر محیط آزمایشی را که استفاده کرده اید درج کنید.
اشکال را ارسال کنید
در نهایت، اشکال را ارسال کنید. برای پاسخ به اشکال، مراقب ایمیل خود باشید. معمولاً در طول بررسی، مهندسان ممکن است سؤالات دیگری داشته باشند. اگر در بازتولید موضوع مشکل داشته باشند، ممکن است تماس بگیرند.