הסבר על תכונות המסוף

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

אם אתם מחפשים הפניית API לפונקציות כמו console.log(), תוכלו לעיין בהפניית API למסוף. למידע נוסף על פונקציות כמו monitorEvents(), אפשר לעיין במאמר Console Utilities API Reference.

פתיחת מסוף Cloud

אפשר לפתוח את המסוף כחלונית או ככרטיסייה במגירה.

פתיחת החלונית של המסוף

מקישים על Control+Shift+J או Command+Option+J (Mac).

כדי לפתוח את מסוף Cloud מתפריט הפקודות, מתחילים להקליד Console ואז מריצים את הפקודה Show Console עם התג Panel לידה.

פתיחת המסוף בחלונית ההזזה

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

חלונית ההזזה קופצת בחלק התחתון של החלון של כלי הפיתוח, והכרטיסייה מסוף פתוחה.

כדי לפתוח את הכרטיסייה Console מתפריט הפקודות, מתחילים להקליד Console ואז מריצים את הפקודה Show Console עם התג Drawer לידה.

פתיחת הגדרות מסוף

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

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

• הסתרת הרשת
• שמירת יומן הרישום
• ההקשר שנבחר בלבד
• קיבוץ הודעות דומות בקונסולה
• הצגת שגיאות CORS במסוף
• רישום XMLHttpRequests ביומן
• הערכה יזומה
• השלמה אוטומטית מההיסטוריה

פתיחת סרגל הצד של המסוף

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

הצגת הודעות

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

השבתת קיבוץ ההודעות

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

הצגת הודעות מנקודות עצירה

המסוף מסמן הודעות שהופעלו על ידי נקודות עצירה (breakpoint) באופן הבא:

• console.* קריאות בנקודות עצירה (breakpoints) מותנות עם סימן שאלה כתום ?
• הודעות Logpoint עם שתי נקודות ורודות ..

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

הצגת מעקבי ערימה

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

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

הצגת הסיבות לשגיאות בדוחות סטאק

ב-מסוף אפשר לראות שרשראות של סיבות לשגיאות ב-stack trace, אם יש כאלה.

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

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

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

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

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

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

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

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

רישום ביומן של בקשות XHR ואחזור

פותחים את ההגדרות של המסוף ומפעילים את האפשרות Log XMLHttpRequests כדי לרשום את כל הבקשות XMLHttpRequest ו-Fetch למסוף בזמן שהן מתרחשות.

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

הודעות מתמידות בטעינות דפים

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

הסתרת הודעות רשת

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

כדי להסתיר הודעות רשת:

1. פותחים את הגדרות המסוף.
2. מסמנים את התיבה הסתרת הרשת.

הצגה או הסתרה של שגיאות CORS

במסוף יכולות להופיע שגיאות CORS אם בקשות רשת נכשלות בגלל שיתוף משאבים בין מקורות (CORS).

כדי להציג או להסתיר שגיאות CORS:

1. פותחים את ההגדרות של המסוף.
2. מסמנים את התיבה Show CORS שגיאות במסוף או מבטלים את הסימון שלה.

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

• כדי לפתוח את הבקשה עם TypeError שקשור ל-CORS בחלונית Network.
• כדי לקבל פתרון אפשרי בכרטיסייה בעיות.

סינון הודעות

יש הרבה דרכים לסנן הודעות במסוף.

סינון הודעות בדפדפן

פותחים את סרגל הצד של מסוף הפקודה ולוחצים על הודעות משתמשים כדי להציג רק הודעות שהגיעו מ-JavaScript של הדף.

סינון לפי רמת היומן

כלי הפיתוח מקצים רמות חומרה לרוב השיטות של console.*.

יש ארבע רמות:

• Verbose
• Info
• Warning
• Error

לדוגמה, הערך console.log() נמצא בקבוצה Info, ואילו הערך console.error() נמצא בקבוצה Error. במאמר העזרה של Console API מתואר רמת החומרה של כל method רלוונטי.

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

לוחצים על התפריט הנפתח רמות יומן כדי להפעיל או להשבית הודעות Verbose, ‏ Info, ‏ Warning או Error.

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

סינון הודעות לפי כתובת URL

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

אפשר להשתמש גם בדומיינים. לדוגמה, אם https://example.com/a.js ו-https://example.com/b.js מתעדים הודעות ביומן, אפשר להשתמש ב-url:https://example.com כדי להתמקד בהודעות משני הסקריפטים האלה.

כדי להסתיר את כל ההודעות מכתובת URL מסוימת, מקלידים -url: ואחריו את כתובת ה-URL, לדוגמה, https://b.wal.co. זהו מסנן של כתובות URL שליליות.

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

סינון הודעות מהקשרים שונים

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

סינון הודעות שלא תואמות לתבנית של ביטוי רגולרי

מקלידים ביטוי רגולרי כמו /[foo]\s[bar]/ בתיבת הטקסט Filter כדי לסנן הודעות שלא תואמות לדפוס הזה. אין להקליד רווחים. במקום זאת, צריך להשתמש ב-\s. כלי הפיתוח בודק אם התבנית נמצאת בטקסט של ההודעה או בסקריפט שגרם להוספת ההודעה ליומן.

לדוגמה, הביטוי הבא מסנן את כל ההודעות שלא תואמות ל-/[gm][ta][mi]/.

חיפוש טקסט ביומני

כדי לחפש טקסט בהודעות ביומן:

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

הרצת JavaScript

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

אפשרויות להעתקת מחרוזות

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

• העתקה כליטרל של JavaScript. המערכת מסירה את תו הבריחה (escape) מתווים מיוחדים מתאימים ומעטפת את המחרוזת במירכאות בודדות, במירכאות כפולות או בסוגריים נטויים, בהתאם לתוכן.
• העתקת תוכן המחרוזת. העתקת המחרוזת הגולמית המדויקת ללוח, כולל שורות חדשות ותווים מיוחדים אחרים.
• העתקה כליטרל של JSON. הפורמט של המחרוזת הוא JSON תקין.

הפעלה מחדש של ביטויים מההיסטוריה

מקישים על המקש חץ למעלה כדי לעבור בין ההיסטוריה של ביטויי JavaScript שהרצתם קודם במסוף. מקישים על Enter כדי להריץ את הביטוי שוב.

הצגת הערך של ביטוי בזמן אמת באמצעות ביטויים בזמן אמת

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

השבתת הערכה יזומה

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

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

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

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

השבתת ההשלמה האוטומטית מההיסטוריה

כשמקלידים ביטוי, בחלון הקופץ של ההשלמה האוטומטית במסוף מוצגים ביטויים שהרצתם קודם. הביטויים האלה מתחילים בתו >. בדוגמה הבאה, DevTools העריך קודם את document.querySelector('a') ואת document.querySelector('img').

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

בחירת הקשר של JavaScript

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

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

בדיקת מאפייני אובייקט

במסוף אפשר להציג רשימה אינטראקטיבית של המאפיינים של אובייקט JavaScript שציינתם.

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

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

זיהוי נכסים משלכם ונכסים שעברו בירושה

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

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

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

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

זיהוי מאפיינים שניתן למנות ומאפיינים שלא ניתן למנות

מאפיינים רבים הם בהירים בצבעים. מאפיינים שלא ניתן למנות אותם מושתקים. אפשר לחזור על מאפיינים של מספרים באמצעות לולאת for … in או השיטה Object.keys().

איתור מאפיינים פרטיים של מופעי כיתות

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

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

בדיקת מאפייני JavaScript פנימיים

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

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

• לכל אובייקט יש [[Prototype]].
• לרכיבי wrapper ראשוניים יש מאפיין [[PrimitiveValue]].
• ל-ArrayBuffer אובייקטים יש את המאפיינים (properties) הבאים:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• בנוסף למאפיינים ספציפיים ל-ArrayBuffer, לאובייקטים מסוג WebAssembly.Memory יש מאפיין [[WebAssemblyMemory]].
• אוספים עם מפתחות (מפות וקבוצות) כוללים מאפיין [[Entries]] שמכיל את הרשומות עם המפתחות.
• לאובייקטים מסוג Promise יש את המאפיינים הבאים:
  • [[PromiseState]]: בהמתנה, בוצעו או נדחו
  • [[PromiseResult]]: undefined אם ההזמנה בהמתנה, <value> אם ההזמנה בוצעה, <reason> אם ההזמנה נדחתה
• ל-Proxy אובייקטים יש את המאפיינים הבאים: אובייקט [[Handler]], אובייקט [[Target]] ו-[[isRevoked]] (מושבת או לא).

בדיקת פונקציות

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

כדי להציג את מאפייני הפונקציה הפנימיים ב-JavaScript, משתמשים בפקודה console.dir().

לפונקציות יש את המאפיינים הבאים:

• [[FunctionLocation]]. קישור לשורה עם הגדרת הפונקציה בקובץ מקור.
• [[Scopes]]. רשימה של ערכים וביטויים שיש לפונקציה גישה אליהם. כדי לבדוק היקפים של פונקציות במהלך ניפוי באגים, ראו הצגה ועריכה של מאפיינים מקומיים, מאפיינים של סגירה ומאפייני גלובלי.
• לפונקציות קשורות יש את המאפיינים (properties) הבאים:
  • [[TargetFunction]]. היעד של bind().
  • [[BoundThis]]. הערך של this.
  • [[BoundArgs]]. מערך של ארגומנטים של פונקציה.
• פונקציות גנרטורים מסומנות במאפיין [[IsGenerator]]: true.
• גנרטורים מחזירים אובייקטים של איטרטור ויש להם את המאפיינים הבאים:
  • [[GeneratorLocation]]. קישור לשורה עם הגדרת ה-generator בקובץ מקור.
  • [[GeneratorState]]:‏ suspended,‏ closed או running.
  • [[GeneratorFunction]]. המחולל שהחזיר את האובייקט.
  • [[GeneratorReceiver]]. אובייקט שמקבל את הערך.

ניקוי המסוף

אתם יכולים להשתמש בתהליכי העבודה הבאים כדי לנקות את המסוף:

• לוחצים על ניקוי המסוף .
• לוחצים לחיצה ימנית על הודעה ובוחרים באפשרות ניקוי המסוף.
• מקלידים clear() במסוף ומקישים על Enter.
• קוראים ל-console.clear() מתוך ה-JavaScript של דף האינטרנט.
• מקישים על Control+L כשהמסוף ממוקד.