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

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

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

פתיחת הקונסולה

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

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

לוחצים על Control+Shift+J או על Command+Option+J (ב-Mac).

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

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

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

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

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

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

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

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

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

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

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

הצגת הודעות

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת דוחות קריסות אסינכרוניים

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

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

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

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

כדי לראות את כל דוח הקריסות, כולל פריימים של צד שלישי, לוחצים על Show N more frames (הצגת עוד N פריימים) בתחתית דוח הקריסות.

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

רישום ביומן של בקשות XHR ו-Fetch

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

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

שמירת הודעות גם אחרי טעינת דף

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

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

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

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

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

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

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

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

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

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

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

סינון הודעות

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

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

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

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

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

יש ארבע רמות:

• Verbose
• Info
• Warning
• Error

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

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

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

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

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

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

מחיקה, העתקה, הרחבה, כיווץ ושמירה של הודעות

כדי לנקות את החלון Console, מבצעים אחת מהפעולות הבאות:

• לוחצים על חסימה ניקוי המסוף בסרגל הפעולות בחלק העליון.
• לוחצים על Ctrl+L או על Cmd+K.
• לוחצים לחיצה ימנית על אזור ריק במסוף ובוחרים באפשרות ניקוי המסוף בתפריט ההקשר.

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

בתפריט ההקשר אפשר גם:

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

צפייה בערך של ביטוי בזמן אמת באמצעות Live Expressions

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

השבתת הערכה מוקדמת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

זיהוי מאפיינים בבעלות ובירושה

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

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

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

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

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

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

זיהוי מאפיינים פרטיים של מופעי מחלקה

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

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

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

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

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

• לכל אובייקט יש [[Prototype]].
• לאובייקטים עוטפים של טיפוסים פרימיטיביים יש מאפיין [[PrimitiveValue]].
• לאובייקטים מסוג ArrayBuffer יש את המאפיינים הבאים:
  • [[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]]. מציגה את הערכים והביטויים שהפונקציה יכולה לגשת אליהם. כדי לבדוק את היקפי הפונקציות במהלך ניפוי הבאגים, אפשר לעיין במאמר הצגה ועריכה של מאפיינים מקומיים, מאפייני סגירה ומאפיינים גלובליים.
• לפונקציות קשורות יש את המאפיינים הבאים:
  • ‫[[TargetFunction]]. היעד של bind().
  • [[BoundThis]]. הערך של this.
  • ‫[[BoundArgs]]. מערך של ארגומנטים של פונקציה. ‫
• פונקציות גנרטור מסומנות במאפיין [[IsGenerator]]: true.
• גנרטורים מחזירים אובייקטים של איטרטורים, ויש להם את המאפיינים הבאים:
  • ‫[[GeneratorLocation]]. קישור לשורה עם הגדרת הגנרטור בקובץ מקור.
  • [[GeneratorState]]:‏ suspended,‏ closed או running.
  • ‫[[GeneratorFunction]]. הגנרטור שהחזיר את האובייקט.
  • ‫[[GeneratorReceiver]]. אובייקט שמקבל את הערך.

ניקוי המסוף

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

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