ספרים
JavaScript
פרק 9. בדיקות וניפוי שגיאות
שימוש בדיבאגר

JavaScript:
שימוש בדיבאגר

איך לעשות:

הנה קטע קוד ב-JavaScript שאינו נהגה כצפוי:

function buggyMultiply(a, b) {
    return a + b; // אופס! זה אמור להיות כפל, לא חיבור.
}

let result = buggyMultiply(5, 3);
console.log('Result:', result);

הפלט אינו נכון:

Result: 8

בואו נבצע ניפוי באגים ב- Chrome DevTools:

  1. פתח את ה-JS בדפדפן.
  2. לחץ בקליק ימני ובחר “בדוק” כדי לפתוח את DevTools.
  3. לחץ על הכרטיסיה “מקורות” (Sources).
  4. חפש את קטע הקוד או הדף שלך וסמן נקודת עצירה על ידי לחיצה על מספר השורה ליד הפקודה return.
  5. רענן את הדף כדי להפעיל את נקודת העצירה.
  6. בדוק בפאנל “תחום הפעולה” (Scope) כדי לראות את המשתנים המקומיים a ו-b.
  7. התקדם עם הכפתור “עבור מעל קריאת הפונקציה הבאה”.
  8. אתר את הבאג בפקודת הreturn.
  9. תקן את הקוד:
function buggyMultiply(a, b) {
    return a * b; // תוקן!
}

let result = buggyMultiply(5, 3);
console.log('Result:', result);

הפלט המתוקן:

Result: 15

צלילה עמוקה

המושג של ניפוי באגים קיים כבר מתחילת ימי המחשוב—האגדה אומרת שהתחיל כשמצאו פרפרת במחשב בשנות ה-40! היום, דיבאגרים ל-Javascript כמו הכלים המובנים בדפדפנים (Chrome DevTools, Firefox Developer Tools) או דיבאגרים משולבים ב-IDE (Visual Studio Code, WebStorm) מציעים מבחר עצום של תכונות.

אלטרנטיבות לדבאגרים המובנים כוללות כלים של צד שלישי כמו WebStorm או שימוש ב-console.log הטוב והישן לפלט מצבי משתנים. אבל אלו לא מציעים את האינטראקציה בזמן אמת והבדיקה המפורטת הניתנת על ידי דיבאגרים.

בנוגע לפרטי היישום, רוב הדיבאגרים פועלים באופן דומה: הם מאפשרים לך להגדיר נקודות עצירה שמשהים את הביצוע, להתקדם בקוד צעד אחר צעד, לבדוק את מצבי המשתנים הנוכחיים, לעקוב אחר ביטויים, ואף לשנות ערכים בזמן אמת כדי לבדוק תרחישים שונים.

ראה גם

שימוש במעטפת אינטראקטיבית (REPL)כתיבת בדיקות