חומר עזר לניפוי באגים ב-JavaScript

קייס בסקית

Twitter GitHub תקלה

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

GitHub

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

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

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

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

בדיקת הערכים במהלך ההשהיה

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

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

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

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

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

הטמעת הקוד

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

דילוג על שורת הקוד

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

לדוגמה, נניח שאתם מנפים באגים בקוד הבא:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

מושהית ב-A. כשלוחצים על Step over, DevTools מריץ את כל הקוד בפונקציה שעליה אתם עוברים, שהיא B ו-C. לאחר מכן, כלי הפיתוח מושהים ב-D.

כניסה לשורת הקוד

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

לדוגמה, נניח שאתם מנפים באגים בקוד הבא:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

מושהית ב-A. בהקשה על Step to (שלב אל), כלי הפיתוח מריצים את שורת הקוד הזו ואז יושהה ב-B.

יציאה משורת הקוד

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

לדוגמה, נניח שאתם מנפים באגים בקוד הבא:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

מושהית ב-A. בלחיצה על Step out, DevTools יריץ את שאר הקוד ב-getName(), שבדוגמה הזו הוא רק B, ולאחר מכן יושהה ב-C.

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

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

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

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

המשך ביצוע הסקריפט

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

אילוץ הפעלת סקריפט

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

שינוי ההקשר של השרשור

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

החלונית שרשורים בצילום המסך שלמעלה מתוארת בכחול.

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

מעבר בין ביטויים שמופרדים בפסיקים

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

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

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

כשהוא מוקטן, הוא מכיל ביטוי foo(),foo(),42 שמופרד בפסיקים:

function foo(){}function bar(){return foo(),foo(),42}bar();

גם הכלי לניפוי באגים פועל על ביטויים כאלה.

לכן, התנהגות השלבים זהה:

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

הצגה ועריכה של נכסים מקומיים, נכסים שנסגרו ונכסים גלובליים

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

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

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

הצגת המקבץ הנוכחי של שיחות

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

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

החלונית Call Stack בצילום המסך שלמעלה מתוארת בכחול.

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

הפעלה מחדש של פונקציה (מסגרת) במקבץ קריאות

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

כדי להפעיל מחדש מסגרת:

1. השהיה של הפעלת הפונקציה בנקודת עצירה (breakpoint). החלונית Call Stack מתעדת את הסדר של קריאות הפונקציות.

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

   

   הערה: אפשר להפעיל מחדש כל מסגרת של פונקציות ב-Call Stack, מלבד פונקציות WebAssembly, אסינכרוניות ומחולל.

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

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

הפונקציה foo() לוקחת את 0 כארגומנט, רושמת אותו וקוראת לפונקציה bar(). לאחר מכן, הפונקציה bar() מגדילה את הארגומנט.

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

1. מעתיקים את הקוד שלמעלה לקטע קוד חדש ומריצים אותו. ההפעלה עוצרת בנקודת העצירה של שורת הקוד debugger.
   זהירות: כשההפעלה מושהית, אל תשנו באופן פרוגרמטי את הסדר של המסגרות של מקבץ הקריאות. הדבר עלול לגרום לשגיאות לא צפויות.
2. הערה: בכלי לניפוי הבאגים מוצג הערך הנוכחי ליד ההצהרה של הפונקציה: value = 1.
3. מפעילים מחדש את המסגרת bar().
4. כדי לעבור על ההצהרה על הגדלת הערך, לוחצים על F9. חשוב לשים לב שהערך הנוכחי גבוה יותר: value = 2.
5. אופציונלי: בחלונית Scope, לוחצים לחיצה כפולה על הערך כדי לערוך אותו ולהגדיר את הערך הרצוי.

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

   נקודה חשובה: למה הערך לא מאופס ל-0?

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

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

1. עכשיו, צריך להפעיל מחדש את המסגרת foo() במקבץ השיחות. שימו לב שהערך שוב הוא 0.
   נקודה חשובה: למה הערך מאופס ל-0?

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

הצגת מסגרות שכלולות ברשימת הפריטים להתעלמות

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

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

אפשר לנסות את התכונה בדף ההדגמה הזה:

1. בחלונית מקורות, פותחים את הקובץ src > app > app.component.ts.
2. צריך להגדיר נקודת עצירה (breakpoint) בפונקציה increment().
3. בקטע Call Stack, מסמנים את התיבה הצגת פריימים ברשימת הפריטים להתעלמות או מבטלים את הסימון שלה, ומעיינים ברשימה הרלוונטית או המלאה של המסגרות במקבץ השיחות.

הצגה של מסגרות אסינכרוניות

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

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

נקודה חשובה: כלי הפיתוח מיישמים את התכונה 'תיוג מקבץ אסינכרוני' על סמך שיטת ה-API של console.createTask(). ה-framework אחראי להטמעת ה-API. לדוגמה, ב-Angular יש תמיכה בתכונה הזו.

העתקת דוח הקריסות

כדי להעתיק את ערימת הקריאות הנוכחית ללוח, לוחצים לחיצה ימנית במקום כלשהו בחלונית Call Stack ובוחרים באפשרות Copy stack tracking (העתקת דוח קריסות).

זאת דוגמה לפלט:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

ניווט בעץ הקבצים

משתמשים בחלונית Page כדי לנווט בעץ הקבצים.

הקבצים נוצרו על ידי הקבוצה ונפרסו בעץ הקבצים

הערה: זוהי תכונת תצוגה מקדימה של שזמינה החל מגרסה 104 של Chrome.

כשמפתחים אפליקציות אינטרנט באמצעות frameworks (לדוגמה, React או Angular), יכול להיות שיהיה קשה לנווט בין המקורות בגלל הקבצים המוקטנים שנוצרים על ידי כלי ה-build (לדוגמה, webpack או Vite).

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

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

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

הסתרת מקורות שכלולים ברשימת הפריטים להתעלמות מעץ הקבצים

הערה: זוהי תכונת תצוגה מקדימה של שזמינה ב-Chrome גרסה 106.

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

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

התעלמות מסקריפט או מדפוס של סקריפטים

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

לדוגמה, נניח שאתם מבצעים את השלבים בקוד הבא:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

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

התעלמות מסקריפט או מספריית הקבצים מעץ הקבצים

כדי להתעלם מסקריפט ספציפי או מספר שלם:

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

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

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

התעלמות מסקריפט מחלונית העורך

כדי להתעלם מסקריפט מהחלונית עורך:

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

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

התעלמות מסקריפט מהחלונית 'מקבץ שיחות'

כדי להתעלם מסקריפט מהחלונית Call Stack:

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

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

התעלמות מסקריפט מההגדרות

להיכנס אל הגדרות > רשימת התעלמויות.

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

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

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

מעקב אחר הערכים של ביטויי JavaScript מותאמים אישית

אפשר להשתמש בחלונית Watch כדי לצפות בערכים של ביטויים מותאמים אישית. ניתן לצפות בכל ביטוי חוקי של JavaScript.

• לוחצים על Add Expression (הוספת ביטוי) כדי ליצור ביטוי שעון חדש.
• לוחצים על רענון כדי לרענן את הערכים של כל הביטויים הקיימים. הערכים מתרעננים באופן אוטומטי בזמן המעבר בין הקוד.
• מעבירים את העכבר מעל ביטוי ולוחצים על Delete Expression כדי למחוק אותו.

בדיקה ועריכה של סקריפטים

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

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

הגדרת קובץ מוקטן כקריא

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

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

קפל בלוקים של קוד

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

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

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

עריכת סקריפט

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

כדי לערוך סקריפט:

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

3. כדי לשמור, לוחצים על Command+S (Mac) או על Ctrl+S (Windows, Linux). כלי הפיתוח מתקנים את קובץ ה-JS כולו במנוע ה-JavaScript של Chrome.

   

   החלונית עורך בצילום המסך שלמעלה מתוארת בכחול.

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

הערה:התכונה הזו זמינה ב-Chrome בגרסה 105.

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

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

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

כדי לערוך פונקציה בזמן אמת:

1. השהיית הביצוע עם נקודת עצירה (breakpoint)
2. עורכים את הפונקציה המושהית.
3. כדי להחיל את השינויים, מקישים על Command / Control + S. הכלי לניפוי באגים יפעיל מחדש את הפונקציה באופן אוטומטי.
4. ממשיכים בביצוע.

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

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

חיפוש והחלפה של טקסט בסקריפט

כדי לחפש טקסט בסקריפט:

1. פותחים את הקובץ בחלונית עריכה בחלונית מקורות.
2. כדי לפתוח סרגל חיפוש מובנה, מקישים על Command+F (Mac) או על Ctrl+F (Windows, Linux).
3. מזינים את השאילתה בסרגל הכתובות. אפשר גם:
   • לוחצים על התאמה של אותיות רישיות כדי שהשאילתה תהיה תלוית אותיות רישיות.
   • לוחצים על שימוש בביטוי רגולרי כדי לחפש באמצעות ביטוי רגולרי.
4. הקישו Enter‏. כדי לעבור לתוצאת החיפוש הקודמת או הבאה, לוחצים על הלחצן למעלה או למטה.

כדי להחליף את הטקסט שמצאתם:

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

השבתת JavaScript

מומלץ לקרוא את המאמר השבתת JavaScript באמצעות כלי הפיתוח ל-Chrome.