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

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

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

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

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

בדיקת ערכים בזמן השהיה

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

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

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

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

מעבר לקוד

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

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

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

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

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, כלי הפיתוח מריצים את שורת הקוד הזו ואז מושהה בתאריך B.

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

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

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

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 , אבל יש דרך מהירה יותר.

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

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

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

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

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

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

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

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

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

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

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

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 שהביא אתכם לנקודה הזו.

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

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

כדי להפעיל קיבוץ, צריך להפעיל את האפשרות > Group files by 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 מותאמים אישית

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

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

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

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