ניפוי באגים ב-JavaScript

Kayce Basques

Sofia Emelianova

במדריך הזה תלמדו את תהליך העבודה הבסיסי לניפוי באגים בכל בעיה ב-JavaScript בכלי הפיתוח. המשיכו לקרוא או לצפות בגרסת הווידאו של המדריך הזה.

שחזור של הבאג

איתור סדרת פעולות שמשחזרת בעקביות באג היא תמיד השלב הראשון לניפוי באגים.

1. יש לפתוח את ההדגמה הזו בכרטיסייה חדשה.
2. מזינים את 5 בתיבה מספר 1.
3. מזינים את 1 בתיבה מספר 2.
4. לוחצים על הוספת מספר 1 ומספר 2. בתווית שמתחת ללחצן כתוב 5 + 1 = 51. התוצאה אמורה להיות 6. זה הבאג שצריך לתקן.

בדוגמה הזו, התוצאה של 5 + 1 היא 51. הוא צריך להיות 6.

היכרות עם ממשק המשתמש של החלונית 'מקורות'

כלי הפיתוח מספקים הרבה כלים שונים למשימות שונות, כמו שינוי CSS, יצירת פרופילים של ביצועי עומסי דפים ומעקב אחרי בקשות רשת. בחלונית מקורות תוכלו לנפות באגים ב-JavaScript.

1. פותחים את כלי הפיתוח ועוברים לחלונית Sources.

   

בחלונית מקורות יש שלושה קטעים:

1. הכרטיסייה דף עם עץ הקבצים. כל קובץ שהדף מבקש מופיע כאן.
2. בקטע Code Editor (עורך קוד). אחרי שתבחרו קובץ בכרטיסייה Page, התוכן של הקובץ יוצג כאן.

3. בקטע כלי לניפוי באגים. כלים שונים לבדיקת ה-JavaScript של הדף.

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

השהיית הקוד עם נקודת עצירה (breakpoint)

שיטה נפוצה לניפוי באגים בבעיה כזו היא להוסיף הרבה הצהרות console.log() לקוד כדי לבדוק ערכים בזמן שהסקריפט פועל. למשל:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

השיטה console.log() עשויה להשלים את העבודה, אבל נקודות עצירה יכולות לבצע אותה מהר יותר. נקודת עצירה (breakpoint) מאפשרת להשהות את הקוד באמצע הביצוע ולבחון את כל הערכים באותו רגע. לנקודות עצירה יש כמה יתרונות על פני השיטה console.log():

• באמצעות console.log(), עליכם לפתוח באופן ידני את קוד המקור, למצוא את הקוד הרלוונטי, להוסיף את ההצהרות console.log() ואז לטעון מחדש את הדף על מנת לראות את ההודעות במסוף. בעזרת נקודות עצירה (breakpoint), תוכלו להשהות את הקוד הרלוונטי בלי לדעת אפילו איך הקוד בנוי.
• בהצהרות console.log(), עליכם לציין באופן מפורש כל ערך שאתם רוצים לבדוק. באמצעות נקודות עצירה (breakpoint), כלי הפיתוח מציגים את הערכים של כל המשתנים באותו רגע. לפעמים יש משתנים שמשפיעים על הקוד שאתם אפילו לא מודעים להם.

בקיצור, נקודות עצירה (breakpoint) יכולות לעזור לך למצוא ולתקן באגים מהר יותר מאשר בשיטה console.log().

אם תחזרו צעד אחד לאחור ותחשבו איך האפליקציה עובדת, תוכלו לנחש ניחוש מושכל שהסכום השגוי (5 + 1 = 51) יחושב ב-event listener click שמשויך ללחצן הוספת מספר 1 ומספר 2. לכן, כדאי להשהות את הקוד בסביבות השעה שבה ה-listener של click יריץ. באמצעות Event Listener Breakpoints אפשר לעשות בדיוק את זה:

1. בקטע Debugger, לוחצים על Event Listener Breakpoints כדי להרחיב את הקטע. כלי הפיתוח חושף רשימה של קטגוריות אירועים ניתנות להרחבה, כמו אנימציה ולוח.
2. לצד קטגוריית האירועים עכבר, לוחצים על arrow_right הרחבה. כלי הפיתוח חושף רשימה של אירועי עכבר, כמו click ו-mousedown. ליד כל אירוע יש תיבת סימון.

3. מסמנים את התיבה click. כלי הפיתוח מוגדרים עכשיו להשהיה אוטומטית כשכל click מתבצע האזנה לאירוע.

   

4. בחזרה להדגמה, לוחצים שוב על הוספת מספר 1 ומספר 2. כלי הפיתוח משהים את ההדגמה ומדגישים שורת קוד בחלונית Sources. יש להשהות את כלי הפיתוח בשורת הקוד הזו:

   function onClick() {
   

   אם השהית את ההפעלה בשורת קוד אחרת, לוחצים על המשך המשך ביצוע הסקריפט עד שתשהו בשורה הנכונה.

Event Listener Breakpoints הוא רק אחד מסוגים רבים של נקודות עצירה (breakpoint) שזמינים בכלי הפיתוח. כדאי לבדוק את כל הסוגים השונים, כי בסופו של דבר כל סוג עוזר לנפות באגים בתרחישים שונים במהירות האפשרית. ראו את המאמר השהיית הקוד עם נקודות עצירה כדי ללמוד מתי ואיך להשתמש בכל סוג.

משלימים את הקוד

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

1. בחלונית מקורות בכלי הפיתוח, לוחצים על step_into שלב אל הבקשה הבאה להפעלת פונקציה כדי לבצע את הביצוע של הפונקציה onClick(), שורה אחר שורה. בכלי הפיתוח מדגישים את שורת הקוד הבאה:

   if (inputsAreEmpty()) {
   

2. לוחצים על step_over Step on next function call.

   כלי הפיתוח מריצים את inputsAreEmpty() בלי להיכנס אליו. שימו לב איך כלי הפיתוח מדלגים על כמה שורות קוד. הסיבה לכך היא שההערכה של inputsAreEmpty() היא False, כך שבלוק הקוד של ההצהרה if לא בוצע.

זה הרעיון הבסיסי של מעבר לקוד. אם תסתכלו על הקוד ב-get-started.js, תוכלו לראות שהבאג נמצא כנראה במקום כלשהו בפונקציה updateLabel(). במקום לעבור דרך כל שורת קוד, אפשר להשתמש בסוג אחר של נקודת עצירה (breakpoint) כדי להשהות את הקוד קרוב יותר למיקום הצפוי של הבאג.

הגדרת נקודת עצירה (breakpoint) של קו קוד

נקודות עצירה (breakpoint) של שורת קוד הן הסוג הנפוץ ביותר של נקודות עצירה (breakpoint). כשיש שורת קוד ספציפית שרוצים להשהות עליה, השתמשו בנקודת עצירה (breakpoint) של שורת קוד:

1. עיין בשורת הקוד האחרונה ב-updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. מימין לקוד מופיעה מספר השורה של שורת הקוד הספציפית הזו, 32. לוחצים על 32. כלי הפיתוח מוסיף סמל כחול מעל לכיתוב 32. המשמעות היא שיש נקודת עצירה (breakpoint) של שורת קוד בשורה הזו. כלי הפיתוח תמיד מושהים לפני ששורת הקוד הזו מופעלת.

3. לוחצים על המשך המשך הפעלת הסקריפט. הסקריפט ממשיך לפעול עד שהוא מגיע לשורה 32. בשורות 29, 30 ו-31, כלי הפיתוח מציגים את הערכים של addend1, addend2 ו-sum בתוך השורה, לצד ההצהרות שלהם.

בדוגמה הזו, כלי הפיתוח מושהה בנקודת העצירה של שורת הקוד בשורה 32.

בדיקת ערכי המשתנים

הערכים של addend1, addend2 ו-sum נראים חשודים. הן מתפתלות במירכאות, כלומר הן מחרוזות. זו השערה טובה להסבר של הגורם לבאג. עכשיו זה הזמן לאסוף מידע נוסף. בכלי הפיתוח יש הרבה כלים לבחינת ערכי משתנים.

שיטה 1: בדיקת ההיקף

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

לוחצים לחיצה כפולה על ערך של משתנה כדי לערוך אותו.

שיטה 2: ביטויים בשעון

הכרטיסייה צפייה מאפשרת לכם לעקוב אחר הערכים של משתנים לאורך זמן. צפייה לא מוגבלת רק למשתנים. אפשר לאחסן כל ביטוי JavaScript חוקי בכרטיסייה Watch.

ננסה עכשיו:

1. לוחצים על הכרטיסייה צפייה.
2. לוחצים על הוספה הוספת ביטוי שעון.
3. מקלידים typeof sum.
4. הקישו Enter‏. בכלי הפיתוח מוצג typeof sum: "string". הערך מימין לנקודתיים הוא התוצאה של הביטוי.

בצילום המסך מוצגת הכרטיסייה Watch (בפינה השמאלית התחתונה) אחרי היצירה של ביטוי השעון typeof sum.

לפי החשוד, הערך sum מוערך כמחרוזת, כאשר הוא אמור להיות מספר. עכשיו וידאתם שזו הסיבה לבאג.

שיטה 3: המסוף

בנוסף להצגת הודעות console.log(), אפשר להשתמש במסוף גם כדי להעריך הצהרות JavaScript שרירותיות. כשמדובר בניפוי באגים, אפשר להשתמש במסוף כדי לבדוק תיקונים אפשריים לבאגים. ננסה עכשיו:

1. אם חלונית ההזזה של המסוף לא פתוחה, מקישים על Escape כדי לפתוח אותה. הוא נפתח בחלק התחתון של החלון של כלי הפיתוח.
2. במסוף, מקלידים parseInt(addend1) + parseInt(addend2). ההצהרה הזו פועלת כי אתם מושהים בשורת קוד שבה ההיקף addend1 ו-addend2 נמצאים.
3. הקישו Enter‏. כלי הפיתוח בוחנים את ההצהרה ומדפיסים את ההצהרה 6, וזו התוצאה שאתם מצפים שההדגמה תפיק.

בצילום המסך הזה מוצגת חלונית ההזזה במסוף אחרי הערכה של parseInt(addend1) + parseInt(addend2).

החלת תיקון

מצאת תיקון לבאג. כל מה שנותר הוא לנסות את התיקון על ידי עריכת הקוד והפעלה מחדש של ההדגמה. אין צורך לצאת מכלי הפיתוח כדי לבצע את התיקון. אפשר לערוך את קוד JavaScript ישירות בממשק המשתמש של כלי הפיתוח. ננסה עכשיו:

1. לוחצים על המשך המשך הפעלת הסקריפט.
2. ב-Code Editor, מחליפים את שורה 31, var sum = addend1 + addend2 בשורה var sum = parseInt(addend1) + parseInt(addend2).
3. לוחצים על Command + S (Mac) או על Control + S (Windows, Linux) כדי לשמור את השינוי.
4. לוחצים על label_off השבתת נקודות עצירה. הצבע ישתנה לכחול כדי לציין שהוא פעיל. כשהערך הזה מוגדר, כלי הפיתוח מתעלמים מכל נקודות העצירה שהגדרתם.
5. אפשר לנסות את ההדגמה עם ערכים שונים. ההדגמה מחושבת עכשיו כראוי.

השלבים הבאים

במדריך הזה הוצגו רק שתי דרכים להגדרת נקודות עצירה (breakpoint). בכלי הפיתוח יש הרבה דרכים נוספות, כולל:

• נקודות עצירה מותנות שמופעלות רק כשהתנאי שאתם מספקים מתקיים.
• נקודות עצירה על חריגות שזוהו או חריגות שלא נתפסו.
• נקודות עצירה ב-XHR שמופעלות כשכתובת ה-URL המבוקשת תואמת למחרוזת משנה שסיפקתם.

במאמר השהיית הקוד עם נקודות עצירה מוסבר מתי ואיך להשתמש בכל סוג.

יש כמה פקדי שלב קוד שלא הוסברו במדריך הזה. למידע נוסף, ראו מעבר לשורת הקוד.