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

Kayce Basques

Sofia Emelianova

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

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

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

סוג נקודת העצירה (breakpoint)	השתמשו בו כאשר אתם רוצים ...
שורת קוד	השהיה באזור מדויק של קוד.
שורת קוד מותנה	יש להשהות באזור מדויק של קוד, אבל רק כאשר תנאי אחר מתקיים.
נקודת רישום (logpoint)	רישום הודעה במסוף בלי להשהות את הביצוע.
DOM	השהיה בקוד שמשנה או מסיר צומת DOM ספציפי או את הצאצאים שלו.
XHR	השהיה כשכתובת URL של XHR מכילה דפוס מחרוזת.
Event listener	השהיה בקוד שרץ אחרי שאירוע, כמו click, מופעל.
חריג	השהיה בשורת הקוד שמפעילה חריג שנתפס או לא נתפס.
פונקציה	השהיה בכל פעם שמפעילים פונקציה ספציפית.
סוג מהימן	השהיה עקב הפרות של סוג מהימן.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כדי להגדיר נקודת רישום (logpoint):

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

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

   לדוגמה, אפשר לתעד את הפרטים הבאים:

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

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

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

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

בדוגמה הזו מוצגת נקודת יומן (logpoint) בשורה 30 שמתעדת מחרוזת וערך משתנה ב-Console.

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

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

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

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

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

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

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

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

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

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

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

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

  

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

  

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

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

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

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

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

1. לוחצים על הכרטיסייה רכיבים.
2. עוברים לרכיב שעליו רוצים להגדיר את נקודת העצירה.
3. לוחצים לחיצה ימנית על הרכיב.
4. מעבירים את העכבר מעל Break on ובוחרים באפשרות שינויי עץ משנה, שינויים במאפיינים או הסרת צומת.

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

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

• החלונית Elements > DOM Breakpoints.
• החלונית הצדדית Sources > DOM Breakpoints.

בדף הזה תוכלו:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בדוגמה הזו מוצג הכלי לניפוי באגים שהושהה באירוע setTimer שקרה ב-Service Worker.

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

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

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

נקודה חשובה: נכון לעכשיו, בסשן ניפוי באגים ב-Node.js, אפשר להשהות חריגות שזוהו רק אם תשהו גם חריגות שלא נתפסו. פרטים נוספים זמינים במאמר באג מס' 1382762 ב-Chromium.

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

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

  

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

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

  

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

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

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

זוהו חריגים והתעלמתם מקוד

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

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

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

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

מונח מפתח: סקריפטים חוצי-אתרים מבוססי DOM מתרחשים כשנתונים ממקור שנמצא בשליטת משתמש (כמו שם משתמש או כתובת URL להפניה אוטומטית שנלקחה מקטע כתובת ה-URL) מגיעים ל-sink, שהוא פונקציה כמו eval() או מערכי מאפיינים כמו .innerHTML, שיכול להפעיל קוד JavaScript שרירותי.

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

• בודקים הפרות Sink.

  

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

• בודקים את הפרות מדיניות.

  

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

אפשר למצוא מידע נוסף על השימוש ב-API:

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