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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

function foo() {}

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

bar();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

עריכת סקריפט

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

השבתת JavaScript

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