דיווח על בעיות שמצאתם בדפדפן של ספקים הוא חלק בלתי נפרד מהשיפור של פלטפורמת האינטרנט.
שליחת דיווח על באג טוב, אבל דורשת קצת עבודה. המטרה שלכם צריכה להיות לאפשר למהנדסי הדפדפנים למצוא בקלות את הבעיה, להגיע לשורש הבעיה, והכי חשוב – למצוא דרך לתקן אותה. בדרך כלל קל לשחזר באגים שמתקדמים במהירות, עם התנהגות צפויה ברורה.
אימות שזה באג
השלב הראשון הוא להבין מהי ההתנהגות 'הנכונה'.
מהי ההתנהגות הנכונה?
תוכלו לעיין במסמכי ה-API הרלוונטיים ב-MDN או לנסות למצוא מפרטים קשורים. המידע הזה יעזור לכם להחליט איזה API לא תקין, איפה הוא לא תקין ומה ההתנהגות הצפויה.
האם הדף נפתח בדפדפן אחר?
בדרך כלל, התנהגות ששונה בין דפדפנים מקבלת עדיפות גבוהה יותר כבעיה של יכולת פעולה הדדית, במיוחד אם הדפדפן שמכיל את הבאג הוא החריג. כדאי לנסות לבדוק את הגרסאות העדכניות ביותר של Chrome, Firefox, Safari ו-Edge, אולי באמצעות כלי כמו BrowserStack.
אם אפשר, כדאי לבדוק שהדף לא מתנהג באופן שונה בכוונה תחילה בגלל ניטור של סוכן המשתמש. בכלי הפיתוח של Chrome, מנסים להגדיר את המחרוזת User-Agent בדפדפן אחר.
האם הבעיה התרחשה בגרסה אחרונה?
האם הפעולה הזו פעלה כמצופה בעבר, אבל הפסיקה לפעול בגרסה עדכנית של הדפדפן? אפשר לטפל בבעיות רגרסיה כאלה מהר יותר, במיוחד אם מספקים מספר גרסה שבה הבעיה לא הייתה קיימת ומספר גרסה שבה היא הייתה קיימת. אפשר להשתמש בכלים כמו BrowserStack כדי לבדוק גרסאות ישנות של דפדפנים. אפשר להשתמש בכלים כמו הכלי bisect-builds (ל-Chromium) כדי לחפש את השינוי.
אם מדובר בבעיה של נסיגה (regression) ואפשר לשחזר אותה, בדרך כלל אפשר למצוא את שורש הבעיה ולתקן אותה במהירות.
האם משתמשים אחרים נתקלו באותה בעיה?
אם נתקלתם בבעיות, סביר להניח שמפתחים אחרים נתקלו בהן גם כן. קודם נסו לחפש את הבאג ב-Stack Overflow. הפעולה הזו יכולה לעזור לתרגם בעיה מופשטת ל-API לא תקין ספציפי, וגם למצוא פתרון עקיף לטווח קצר עד שהבאג יתוקן.
האם כבר דווח עליו בעבר?
אחרי שתקבלו מושג לגבי הבאג, תוכלו לחפש אותו במסד הנתונים של באגים בדפדפנים כדי לבדוק אם הוא כבר דווח.
- דפדפנים המבוססים על Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- דפדפני Safari ודפדפנים מבוססי-WebKit: https://bugs.webkit.org/
אם מצאתם באג קיים שמתאר את הבעיה, תוכלו להוסיף תמיכה על ידי סימון הבאג בכוכב, הוספה למועדפים או הוספת תגובה. באתרים רבים אפשר להוסיף את עצמכם לרשימת עותקי האימייל ולקבל עדכונים כשהבאג משתנה.
אם תחליטו לכתוב תגובה לגבי הבאג, כדאי לכלול מידע על האופן שבו הבאג משפיע על האתר שלכם. מומלץ להימנע מהוספת תגובות בסגנון '+1', כי בדרך כלל שירותי מעקב אחר באגים שולחים אימיילים על כל תגובה.
דיווח על הבאג
אם הבאג לא דווח בעבר, זה הזמן להודיע לספק הדפדפן.
יצירת מקרה בדיקה מצומצם
ב-Mozilla יש מאמר מצוין בנושא איך יוצרים תרחיש בדיקה מצומצם. בקיצור, תיאור של הבעיה הוא התחלה טובה, אבל אין כמו דוגמה מפורטת שמראה את הבעיה בבאג. כדי להגדיל את הסיכוי להתקדמות מהירה, הדוגמה צריכה להכיל את הקוד המינימלי הנדרש כדי להדגים את הבעיה. דוגמת קוד מינימלית היא הדבר החשוב ביותר שתוכלו לעשות כדי להגדיל את הסיכויים לכך שהבאג יתוקן.
ריכזנו כאן כמה טיפים לצמצום מקרה הבדיקה:
- מורידים את דף האינטרנט, מוסיפים את
<base href="https://original.url">ומוודאים שהבאג קיים באופן מקומי. יכול להיות שתצטרכו שרת HTTPS פעיל אם כתובת ה-URL משתמשת ב-HTTPS. - כדאי לבדוק את הקבצים המקומיים בגרסאות ה-build האחרונות של כמה שיותר דפדפנים.
- נסו לצמצם את כל הנתונים לקובץ אחד.
- מסירים קוד (מתחילים בדברים שאתם יודעים שהם לא נחוצים) עד שהבאג ייעלם.
- ניהול גרסאות מאפשר לכם לשמור את העבודה שלכם ולבטל פעולות שגויות.
אירוח של מקרה בדיקה מצומצם
אם אתם מחפשים מקום טוב לארח בו את תרחיש הבדיקה הממוזער, יש כמה מקומות טובים:
חשוב לדעת שבחלק מהאתרים האלה התוכן מוצג ב-iframe, ויכול להיות שזה יגרום לתכונות או לבאגים להתנהג בצורה שונה.
דיווח על הבעיה
אחרי שתיצרו את תרחיש הבדיקה המינימלי, תוכלו לדווח על הבאג. יש לעבור לאתר הנכון למעקב אחר באגים וליצור בעיה חדשה.
- דפדפנים מבוססי-Chromium – https://crbug.com/new
- Firefox – https://bugzilla.mozilla.org/
- דפדפנים שמבוססים על Safari ו-WebKit – 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 גבוה). חשוב לכלול את הפרטים של כל סביבות הבדיקה שבהן השתמשתם.
שליחת הבאג
בסיום, שולחים את הבאג. כדאי לעקוב באימייל אחרי התשובות לגבי הבאג. בדרך כלל במהלך החקירה, למהנדסים יש שאלות נוספות. אם הם יתקשו לשחזר את הבעיה, יכול להיות שהם יפנו אלינו.