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