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

קייס בסקית

Twitter GitHub תקלה

סופיה אמליאנובה

GitHub

הדף הזה הוא הפניה לתכונות שקשורות למסוף כלי הפיתוח ל-Chrome. ההנחה היא שאתם כבר מכירים את השימוש ב-Play Console כדי להציג הודעות שנרשמות ביומן ולהריץ 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 ואז בוחרים באפשרות Show Console Drawer.

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

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

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

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

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

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

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

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

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

הצגת ההודעות

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

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

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

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

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

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

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

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

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

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

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

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

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

נקודה חשובה: כלי הפיתוח מיישמים את התכונה 'תיוג מקבץ אסינכרוני' על סמך שיטת ה-API של console.createTask(). כלי הפיתוח מעודדים שימוש במסגרות והפשטות ב-API הזה. לדוגמה, ב-Angular יש תמיכה בתכונה הזו.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סינון הודעות

יש הרבה דרכים לסנן הודעות ב-Play Console.

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

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

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

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

יש ארבע רמות:

• Verbose
• Info
• Warning
• Error

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

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

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

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

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

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

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

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

הרצת JavaScript

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

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

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

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

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

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

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

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

השבתת הערכה דחופה

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

הפעלה של הפעלת משתמש על ידי הערכה

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ה-Console מגדיר מאפיינים פרטיים של מופעי מחלקה עם קידומת #.

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

בדיקה של מאפייני JavaScript פנימיים

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

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

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

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

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

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

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

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

ניקוי המסוף

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

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