דיווח על בעיות שמצאתם בדפדפן של ספקים הוא חלק בלתי נפרד מהשיפור של פלטפורמת האינטרנט.
שליחת דיווח על באג טוב, אבל דורשת קצת עבודה. המטרה שלכם צריכה להיות לאפשר למהנדסי הדפדפנים למצוא בקלות את הבעיה, להגיע לשורש הבעיה, והכי חשוב – למצוא דרך לתקן אותה. בדרך כלל קל לשחזר באגים שמתקדמים במהירות, עם התנהגות צפויה ברורה.
איך מוודאים שמדובר בבאג
השלב הראשון הוא להבין מהי ההתנהגות 'הנכונה'.
מהי ההתנהגות הנכונה?
כדאי לעיין במאמרי העזרה הרלוונטיים של ה-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.
בונוס: הוספת צילום מסך או סרטון מסך של הבעיה
אין צורך בכך, אבל לרוב מומלץ להוסיף צילום מסך או הקלטת מסך של הבעיה. האפשרות הזו שימושית במיוחד כשבאגים מתרחשים אחרי כמה שלבים או אחרי פעילות חריגה. לעיתים קרובות, מהנדסי הדפדפנים יכולים להבין טוב יותר מה קרה באמצעות הקלטות מסך וצילומי מסך.
כוללים פרטים על הסביבה
יש באגים שאפשר לשחזר רק במערכות הפעלה מסוימות, או רק במסכים מסוגים ספציפיים (לדוגמה, מסכים עם רזולוציה נמוכה או גבוהה). חשוב לכלול את הפרטים של כל סביבות הבדיקה שבהן השתמשתם.
שליחת הבאג
בסיום, שולחים את הבאג. כדאי לעקוב באימייל אחרי התשובות לגבי הבאג. בדרך כלל במהלך הבדיקה, למהנדסים עשויות להיות שאלות נוספות. אם הם יתקששו לשחזר את הבעיה, הם עשויים לפנות אליך.