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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

שלב על שורת הקוד

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

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

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.

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

הדגמה של ביטויים מופרדים בפסיקים

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

function foo() {}

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

bar();

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

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

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

לכן, הביצוע של השלבים הוא זהה:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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() ולעבור עוד כמה פעמים דרך הצהרת הצבירה. הערך הזה ממשיך לעלות.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

דוגמה לפלט:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

עריכת סקריפט

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

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

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

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

   

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

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

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

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

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

1. להשהות את הביצוע באמצעות נקודת עצירה.
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