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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

כדי להגדיר נקודת עצירה בשורת קוד ב-DevTools:

1. לוחצים על החלונית מקורות.
2. פותחים את הקובץ שמכיל את שורת הקוד שרוצים להפסיק בה.
3. עוברים לשורת הקוד.
4. משמאל לשורת הקוד מופיעה העמודה 'מספר השורה'. לוחצים עליו. סמל כחול מופיע בחלק העליון של העמודה של מספר השורה.

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

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

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

console.log('a');
console.log('b');
debugger;
console.log('c');

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

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

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

כדי להגדיר נקודת עצירה מותנית בשורת קוד:

1. פותחים את החלונית מקורות.
2. פותחים את הקובץ שמכיל את שורת הקוד שרוצים להפסיק בה.
3. עוברים לשורת הקוד.
4. משמאל לשורת הקוד מופיעה העמודה של מספר השורה. לוחצים לחיצה ימנית עליו.
5. בוחרים באפשרות הוספת נקודת עצירה (breakpoint) מותנית. מתחת לשורת הקוד תופיע תיבת דו-שיח.
6. מזינים את התנאי בתיבת הדו-שיח.
7. מקישים על Enter כדי להפעיל את נקודת העצירה. סמל כתום עם סימן שאלה יופיע מעל העמודה של מספרי השורות.

בדוגמה הזו מוצגת נקודת עצירה מותנית בשורת קוד, שהופעל רק כאשר הערך של x חרג מ-10 בלולאה בחזרה i=6.

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

אפשר להשתמש בנקודות עצירה בקוד (logpoints) כדי לתעד הודעות במסוף בלי להשהות את הביצועים בלי להעמיס את הקוד בקריאות ל-console.log().

כדי להגדיר נקודת התחלה ביומן:

1. פותחים את החלונית מקורות.
2. פותחים את הקובץ שמכיל את שורת הקוד שרוצים להפסיק בה.
3. עוברים לשורת הקוד.
4. משמאל לשורת הקוד מופיעה העמודה של מספר השורה. לוחצים לחיצה ימנית.
5. בוחרים באפשרות Add logpoint. מתחת לשורת הקוד תופיע תיבת דו-שיח.

6. מזינים את הודעת היומן בתיבת הדו-שיח. אפשר להשתמש באותו תחביר כמו בקריאה ל-console.log(message).

   לדוגמה, אפשר לתעד:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   במקרה כזה, ההודעה שתירשם ביומן היא:

   // str = "test"
   // num = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. מקישים על Enter כדי להפעיל את נקודת העצירה. סמל ורוד עם שתי נקודות יופיע מעל העמודה של מספרי השורות.

בדוגמה הזו מוצגת נקודת רישום ביומן בשורה 30, שמרישה מחרוזת וערך משתנה במסוף.

עריכת נקודות עצירה בקו קוד

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

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

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

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

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

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

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

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

כדי לערוך נקודת עצירה:

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

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

  

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

  

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

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

דילוג על נקודות עצירה באמצעות 'אין להשהות כאן'

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

כדי להשתיק מיקום להפסקה:

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

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

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

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

נקודות עצירה לשינוי DOM

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

כדי להגדיר נקודת עצירה לשינוי DOM:

1. לוחצים על הכרטיסייה Elements.
2. עוברים לאלמנט שבו רוצים להגדיר את נקודת העצירה.
3. לוחצים לחיצה ימנית על הרכיב.
4. מעבירים את העכבר מעל Break on ובוחרים באפשרות Subtree modifications,‏ Attribute modifications או Node removal.

בדוגמה הזו מוצג תפריט ההקשר ליצירת נקודת עצירה לשינוי DOM.

רשימה של נקודות עצירה לשינויים ב-DOM מופיעה ב:

• Elements (רכיבים) > DOM Breakpoints (נקודות עצירה של DOM).
• בחלונית הצדדית מקורות > נקודות עצירה ב-DOM.

שם תוכלו:

• מפעילים או משביתים אותם באמצעות .
• לוחצים לחיצה ימנית > הסרה או חשיפת הרכיבים ב-DOM.

סוגי נקודות עצירה לשינוי DOM

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

נקודות עצירה של XHR/אחזור

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

דוגמה אחת למקרה שבו הכלי הזה יכול להיות שימושי היא כשאתם רואים שהדף מבקש כתובת URL שגויה, ואתם רוצים למצוא במהירות את קוד המקור של AJAX או Fetch שגורם לבקשה השגויה.

כדי להגדיר נקודת עצירה של XHR/אחזור:

1. לוחצים על החלונית מקורות.
2. מרחיבים את החלונית נקודות עצירה של XHR.
3. לוחצים על Add breakpoint.
4. מזינים את המחרוזת שדרכה רוצים לפצל. כלי הפיתוח מושהים כשהמחרוזת הזו מופיעה בכל מקום בכתובת ה-URL של בקשת ה-XHR.
5. מקישים על Enter כדי לאשר.

בדוגמה הזו מוסבר איך ליצור נקודת עצירה של XHR/אחזור בקטע נקודות עצירה של XHR/אחזור לכל בקשה שמכילה את הערך org בכתובת ה-URL.

נקודות עצירה של event listener

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

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

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

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

בדוגמה הזו מוצג הכלי לניפוי באגים שהושהה באירוע setTimer שהתרחש ב-service worker.

אפשר גם למצוא רשימה של פונקציות event listener בחלונית Elements > Event Listeners.

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

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

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

• מסמנים את התיבה השהיה בחריגים לא מזוהים.

  

  בדוגמה הזו, הביצוע מושהה בחריג שלא זוהה.

• מסמנים את התיבה השהיה בחריגות שזוהו.

  

  בדוגמה הזו, הביצוע מושהה כשמתרחשת חריגה שזוהתה.

חריגים בקריאות אסינכרוניות

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

חריגות שנתפסות קוד שנדחה

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

בדוגמה הבאה כלי ניפוי הבאגים מושהה על חריגה שנלכדה שהושקה על ידי library.js שהתעלמו ממנו, ועבר דרך mycode.js שלא התעלמו ממנו.

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

נקודות עצירה (breakpoint) בפונקציות

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

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

מוודאים שפונקציית היעד נמצאת בהיקף

כלי הפיתוח יקפיץ ReferenceError אם הפונקציה שרוצים לנפות בה באגים לא נכללת.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

אם אתם קוראים לפונקציה debug() ממסוף DevTools, יכול להיות שיהיה קשה לוודא שהיא נמצאת בהיקף. הנה שיטה אחת:

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

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

Trust Type API מספק הגנה מפני ניצול פרצות אבטחה שנקראות סקריפטים חוצי אתרים (XSS).

בקטע נקודות עצירה בחלונית מקורות, עוברים לקטע נקודות עצירה של הפרת מדיניות CSP ומפעילים אחת מהאפשרויות הבאות או את שתיהן, ואז מריצים את הקוד:

• מסמנים את הפרות ב-Sink.

  

  בדוגמה הזו, הביצוע מושהה בגלל הפרה של sink.

• צריך לבדוק את הפרות מדיניות.

  

  בדוגמה הזו, הביצוע מושהה בגלל הפרת מדיניות. כללי המדיניות לגבי סוגים מהימנים מוגדרים באמצעות trustedTypes.createPolicy.

מידע נוסף על השימוש ב-API זמין במאמרים הבאים:

• כדי לשפר את האבטחה, מומלץ לקרוא את המאמר מניעת נקודות חולשה של פריצות XSS מבוססות-DOM באמצעות סוגים מהימנים.
• למידע נוסף על ניפוי באגים, אפשר לעיין במאמר הטמעת ניפוי באגים של CSP ושל סוגים מהימנים בכלי הפיתוח של Chrome.