בפרק הרביעי של Front Cast אדיר קנדל וניר ארגיל מארחים את שמעון מויאל כדי לדבר על כל מה שקשור בדיבאגינג בפרונט. איך מוצאים באגים? איך מטפלים בבאגים וכיצד מונעים מהם לחזור?
איך נראה תהליך דיבאגינג בפרונט?
ראשית עלינו לנסות ולשחזר את הבאג, ברגע שנצליח לעשות זאת נוכל להגיע למקור שלו ביעילות. התהליך מתחיל כבר בשלב של הכרת הפרויקט, ככל שנכיר את הפרויקט טוב יותר נוכל להגיע לשורש הבעיה מהר יותר.
אך כיצד ניתן לשחזר באג בדפדפן?
- שימוש בפונקציות השונות של אובייקט ה
console. המוקרת מכולן היאconsole.logאך יש עוד רבות שאנו לא מרבים להשתמש בהן, כמו למשלconsole.warn,console.tableועוד מתודות שציינו במהלך הפרק. - שימוש בכלים חיצוניים לאיסוף וניתוח לוגים כמו Sentry, LogRocket.
- כלי ה DevTools והטאבים המובנים בדפדפן.
האם אפשר למנוע באגים לחלוטין?
כנראה שלא ניתן למנוע באגים לחלוטין אך בהחלט יש לנו צרכים לצמצים את האפשרות שבאגים יווצרו או ישתחזרו.
מה עלינו לעשות כדי למנוע באגים?
- שימוש נכון והחלה של חוקי ESLint בפרויקט.
- הגדרת טייפים לפונקציות ומשתנים ע״י TypeScript או JSDoc.
- הכנסת בדיקות לפרויקט כמו בדיקות יחידה (unit tests), בדיקות UI וכו׳…
מה קורה אחרי שמצאנו באג?
חשוב שבכל פרויקט תהיה הגדרה לתהליך טיפול בבאג לאחר שזה קורה. ברוב המקרים נרצה לממש בדיקה שמונעת מין הבאג לחזור.
בנוסף, חשוב לחדד את נוהל העלאת גירסא, קוד שלא נבדק כראוי ע״י יוצרו לא יכול לעלות לגירסא הבאה מה שאומר שלכל מפתח/ת יש אחריות על טיב הקוד שמעלים.
לסיכום
תהליך הדיבאגינג בפרונט מבוסס על שיטות שונות המיועדות למציאת באג, טיפולו מניעת חזרתו לאפליקציה שלנו. אומנם לא ניתן להימנע לחלוטין מבאגים אך בהחלט ניתן למנוע מהם לחזור לקוד שלנו.
בסופו של דבר אחד מהפרמטרים למדידת איכות המוצר שלנו הוא איכות הקוד, ולכן השאיפה שלנו היא ליצור קוד חסים מבאג ככול הניתן בעזרת הכלים והטכניקות שפרטנו במאמר הנ״ל.