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

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

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

פתיחת המסוף

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

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

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

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

פתיחת הקונסולה שבמגירה

מקישים על Escape או על Customize and Control DevTools ואז על הצגת חלונית ההזזה במסוף.

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

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

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

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

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

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

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

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

הצגת ההודעות

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

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

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

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

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

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

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

הצגת דוחות הקריסות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שליחה מתמשכת של הודעות בין טעינות של דפים

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

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

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

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

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

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

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

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

1. לפתיחת הגדרות המסוף
2. מסמנים את התיבה Show CORS errors in the console (הצגת שגיאות CORS במסוף) או מנקים את הסימון.

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

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

סינון הודעות

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

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

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

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

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

יש ארבע רמות:

• Verbose
• Info
• Warning
• Error

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

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

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

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

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

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

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

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

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

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

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

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

הרצת JavaScript

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

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

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

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

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

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

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

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

השבתה של Eager Evaluation

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

טריגר הפעלה של משתמשים לאחר הערכה

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

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

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

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

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

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

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

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

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

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

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

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

הנכסים בבעלות ה-Spot ובנכסים שעברו בירושה

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

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

הערכה של רכיבי גישה בהתאמה אישית

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

מצאו מאפיינים מספריים ולא ניתנים לספירה

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

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

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

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

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

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

המאפיינים הפנימיים הבאים עשויים להופיע באובייקטים שונים:

• לכל אובייקט יש [[Prototype]].
• ל-wrappers פרימיטיביים יש מאפיין [[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() במסוף ולאחר מכן מקישים על Enter.
• הפעל את console.clear() מה-JavaScript של דף האינטרנט שלך.
• מקישים על Control+L כשהמסוף נמצא בפוקוס.