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

קייס בסקית

Twitter GitHub תקלה

סופיה אמליאנובה

GitHub

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

שלב 1: משחזרים את הבאג

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

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

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

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

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

1. פותחים את כלי הפיתוח על ידי הקשה על Command+Option+J (Mac) או Control+Shift+J (Windows או Linux). מקש הקיצור הזה פותח את החלונית Console.

   

2. לוחצים על הכרטיסייה מקורות.

   

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

1. החלונית ניווט קבצים. כל קובץ שהדף מבקש מופיע כאן.
2. החלונית Code Editor (עורך הקוד). אחרי שבוחרים קובץ בחלונית File Navigator, התוכן של הקובץ יוצג כאן.
3. החלונית JavaScript Debugging (ניפוי באגים ב-JavaScript). כלים שונים לבדיקת ה-JavaScript של הדף. אם החלון של כלי הפיתוח רחב, החלונית מוצגת מימין לחלונית Code Editor.

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

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

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

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

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

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

   

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

   function onClick() {
   

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

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

נקודות עצירה (breakpoint) של event listener הן רק אחד מסוגים רבים של נקודות עצירה (breakpoint) שזמינים ב-DevTools. כדאי לזכור בעל-פה את כל הסוגים השונים, כי בסופו של דבר כל סוג עוזר לנפות תרחישים שונים במהירות האפשרית. במאמר Pause Your Code With Breakpoints אפשר לקרוא מתי ואיך להשתמש בכל סוג.

שלב 4: משלימים את הקוד

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

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

   if (inputsAreEmpty()) {
   

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

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

שלב 5: מגדירים נקודת עצירה (breakpoint) של שורת קוד

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

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

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

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

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

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

שלב 6: בודקים את ערכי המשתנים

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

שיטה 1: החלונית 'היקף'

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

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

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

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

בצילום המסך שלמעלה רואים את החלונית Watch Expression (בצד שמאל למטה) אחרי שיוצרים את ביטוי השעון typeof sum. אם החלון של DevTools גדול, החלונית Watch Expression נמצאת בצד שמאל, מעל לחלונית Event Listener Breakpoints.

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

שיטה 3: המסוף

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

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

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

שלב 7: מיישמים תיקון

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

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

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

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

השלבים הבאים

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

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

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

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

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