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

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

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

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

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

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

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

3. מסמנים את תיבת הסימון לקליק. כלי הפיתוח מוגדרים עכשיו להשהיה אוטומטית במקרים כלשהו click ה-event listener יריץ.

   

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

   function onClick() {
   

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

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

מעבר על הקוד

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

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

   if (inputsAreEmpty()) {
   

2. לוחצים על step_over שלב מעבר להפעלת הפונקציה הבאה.

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

זה הרעיון הבסיסי לעבור קוד. אם תסתכל על הקוד ב-get-started.js, תוכל לראות שהבאג נמצא ככל הנראה במקום כלשהו בפונקציה updateLabel(). במקום לדלג בכל שורת קוד, תוכלו להשתמש בסוג אחר של נקודת עצירה (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: בדיקת ההיקף

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

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

שיטה 2: ביטויים של צפייה

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

ננסה עכשיו:

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

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

השלבים הבאים

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

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

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

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