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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ניתן להשתמש בנקודות עצירה (logpoints) של שורת הקוד ביומן כדי לרשום הודעות במסוף בלי להשהות את הביצוע ובלי ליצור עומס בקוד על ידי קריאות 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 = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כאן אפשר למצוא רשימה של נקודות עצירה לשינוי DOM:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בנוסף, הכלי לניפוי באגים מבצע השהיה באירועים שמתרחשים ב-Web Workers או ב-worklets מכל סוג, כולל Shared Storage worklet.

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

אפשר גם למצוא רשימה של מאזינים לאירועים בקטע רכיבים > החלונית Event Listeners

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

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

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

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

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

  

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

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

  

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

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

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

תפסו חריגים והקוד לא נלקח בחשבון

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

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

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

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

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

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

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

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

  

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

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

  

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

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

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