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