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

Kayce Basques

Sofia Emelianova

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

משחזרים את הבאג.

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

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 של הדף.

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

השהיה של הקוד באמצעות נקודת עצירה

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

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

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

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

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

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

   

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

   function onClick() {
   

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

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

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

בודקים את הקוד שלב אחרי שלב

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

1. בחלונית Sources (מקורות) של DevTools, לוחצים על step_into Step into next function call (כניסה אל הקריאה הבאה לפונקציה) כדי לעבור על ביצוע הפונקציה onClick(), שורה אחר שורה. שורת הקוד הבאה תודגש בכלי הפיתוח:

   if (inputsAreEmpty()) {
   

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

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

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

הגדרת נקודת עצירה בשורת קוד

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

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

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

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

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

בדוגמה הזו, DevTools מושהה בנקודת העצירה בשורת הקוד בשורה 32.

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

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

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

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

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

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

שיטה 2: ביטויים של מעקב

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

הערה: בהתאם להעדפות הפריסה ולרוחב החלון של DevTools, הכרטיסייה Watch עשויה להופיע כקטע שניתן לכווץ יחד עם Breakpoints ו-Call stack.

ננסה עכשיו:

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

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

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

שיטה 3: מסוף

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

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

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

החלת תיקון

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

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. כדאי לנסות את הדמו עם ערכים שונים. הדוגמה מחשבת עכשיו בצורה נכונה.

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

טיפ: החל מגרסה 105 של Chrome, אפשר לערוך פונקציה מושהית בזמן אמת.

השלבים הבאים

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

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

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

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

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