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

Sofia Emelianova
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) של שורת קוד.

בדוגמה הזו מוצגת נקודת עצירה (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) של קו-קוד מותנה.

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

נקודת רישום (logpoint) שמתעדת מחרוזת וערך משתנה במסוף.

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

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

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

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

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

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

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

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

תפריט ההקשר של הקבוצה.

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

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

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

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

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

רשימות של נקודות עצירה ב-DOM בחלוניות Elements and 'מקורות'.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הכלי לניפוי באגים השהה אירוע של קובץ שירות (service worker).

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

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

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

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

בחלונית 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).

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

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

    מושהית בהפרת sink כאשר תיבת הסימון המתאימה מופעלת.

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

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

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

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

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