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