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

Kayce Basques

Sofia Emelianova

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

במאמר תחילת העבודה עם ניפוי באגים ב-JavaScript ב-Chrome DevTools מוסבר על העקרונות הבסיסיים של ניפוי באגים.

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

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

בדיקת ערכים במצב מושהה

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

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

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

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

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

בדיקה של הקוד שלב אחרי שלב

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

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

כשהקוד מושהה בשורה שמכילה פונקציה שלא רלוונטית לבעיה שאתם מנסים לנפות באגים, לוחצים על 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 מעל, כלי הפיתוח מריצים את כל הקוד בפונקציה B ו-C שרוצים לדלג עליה. כלי הפיתוח יושהו בD.

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

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

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

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 into, DevTools מפעיל את שורת הקוד הזו ואז עוצר ב-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. כשמקישים על יציאה מהפונקציה, DevTools מבצע את שאר הקוד ב-getName(), שהוא רק B בדוגמה הזו, ואז מושהה ב-C.

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

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

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

לוחצים לחיצה ימנית על שורת הקוד הרצויה ובוחרים באפשרות Continue to here. DevTools מריץ את כל הקוד עד לנקודה הזו, ואז מושהה בשורה הזו.

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

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

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

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

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

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

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

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

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

לכן, התנהגות הצעדים זהה:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

כדי להבין איך פועלת Restart frame, אפשר להיעזר בקוד הבא:

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

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

foo(0);

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

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

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

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

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

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

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

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

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

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

כברירת מחדל, בחלונית Call Stack מוצגים רק המסגרות שרלוונטיות לקוד, והיא לא מציגה סקריפטים שנוספו אל Settings (הגדרות) > Ignore List (רשימת ההשמטות).

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

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

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

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

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

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

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

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

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

דוגמה לפלט:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אפשר להסיר סקריפט מרשימת קטעי הקוד להתעלמות דרך הגדרות > רשימת קטעי הקוד להתעלמות.

התעלמות מסקריפט בחלונית Call Stack

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

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

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

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

הגדרות > רשימת התעלמות.

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

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

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

צפייה בערכים של ביטויי JavaScript מותאמים אישית

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

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

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

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

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

איך הופכים קובץ מינימלי לקריא

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

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

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

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

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

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

עריכת סקריפט

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

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

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

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

   

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

עריכת פונקציה מושהית בשידור חי

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

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

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

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

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

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

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

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

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

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

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

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

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

השבתה של JavaScript

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