רישום הודעות במסוף

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

הודעות במסוף.

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

הגדרת הדגמה וכלי הפיתוח

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

  1. פותחים את הדמו.
  2. אופציונלי: מעבירים את הדמו לחלון נפרד. בדוגמה הזו, המדריך נמצא בצד ימין והדגמה בצד ימין.

    המדריך הזה בצד ימין והדגמה בצד שמאל.

  3. ממקדים את הדמו ומקישים על Control+Shift+J או על Command+Option+J (ב-Mac) כדי לפתוח את DevTools. כברירת מחדל, כלי הפיתוח נפתחים מימין לדמו.

    כלי הפיתוח ייפתח מימין לדמו.

  4. אם רוצים, מחברים את DevTools לתחתית החלון או מבטלים את ההצמדה שלו לחלון נפרד.

    כלי הפיתוח מוצמדים לתחתית הדמו: כלי הפיתוח מוצמדים לתחתית ההדגמה.

    כלי הפיתוח פתוחים בחלון נפרד: כלי הפיתוח פתוחים בחלון נפרד.

הצגת הודעות ביומן מ-JavaScript

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

  1. לוחצים על הלחצן Log Info (פרטי יומן) בדמו. Hello, Console! מתועד במסוף.

    מסוף Google לאחר לחיצה על 'פרטי יומן'.

  2. ליד ההודעה Hello, Console! במסוף, לוחצים על log.js:2. תיפתח החלונית מקורות, ושורת הקוד שגרמה להוספת ההודעה ליומן במסוף תודגש.

    חלונית המקורות נפתחת בכלי הפיתוח אחרי שלוחצים על log.js:2.

    ההודעה תועדה ביומן כשפונקציית JavaScript של הדף התקשרה ל-console.log('Hello, Console!').

  3. חוזרים למסוף באמצעות אחת מהשיטות הבאות:

    • לוחצים על הכרטיסייה מסוף.
    • מקישים על Control+[ או על Command+[ (ב-Mac) עד שהמיקוד עובר למסוף.
    • פותחים את תפריט הפקודות, מתחילים להקליד Console, בוחרים בפקודה Show Console Panel ומקישים על Enter.
  4. לוחצים על הלחצן Log Warning (תיעוד אזהרה) בדמו. הערך Abandon Hope All Ye Who Enter מתועד במסוף.

    מסוף Google לאחר הלחיצה על 'רישום אזהרה ביומן'.

    הודעות בפורמט כזה הן אזהרות.

  5. אופציונלי: לוחצים על log.js:12 כדי להציג את הקוד שגרם לפורמט של ההודעה להיות כזה, ואז חוזרים אל Console בסיום. כדאי לעשות זאת בכל פעם שרוצים לראות את הקוד שגרם לכך שההודעה תירשם בדרך מסוימת.

  6. לוחצים על סמל ההרחבה הרחבה. מול Abandon Hope All Ye Who Enter. בכלי הפיתוח מוצג דוח הקריסה שמגיע עד לקריאה.

    דוח קריסות.

    לפי מעקב הסטאק, נקראת פונקציה בשם logWarning, שבתורה קוראת לפונקציה בשם quoteDante. במילים אחרות, הקריאה שהתרחשה קודם נמצאת בחלק התחתון של נתיב הסטאק. אפשר לתעד את נתוני המעקב אחר סטאק בכל שלב באמצעות קריאה ל-console.trace().

  7. לוחצים על רישום שגיאה ביומן. הודעת השגיאה הבאה תירשם ביומן: I'm sorry, Dave. I'm afraid I can't do that.

    הודעת שגיאה.

  8. לוחצים על Log Table. טבלה עם אומנים מפורסמים מתועדת ביומן במסוף.

    טבלה במסוף.

    שימו לב שהעמודה birthday מאוכלסת רק בשורה אחת. בודקים את הקוד כדי להבין למה זה קורה.

  9. לוחצים על Log Group. שמות של 4 צבים מפורסמים שנלחמים בפשע מקובצים מתחת לתווית Adolescent Irradiated Espionage Tortoises.

    קבוצה של הודעות במסוף.

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

    הודעה עם עיצוב מותאם אישית במסוף.

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

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

הצגת הודעות שתועדו ביומן על ידי הדפדפן

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

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

    שגיאת 404 במסוף.

  2. לוחצים על Cause Error. הדפדפן מתעד ביומן אירוע TypeError שלא תפס, כי JavaScript מנסה לעדכן צומת DOM שלא קיים.

    הודעת TypeError במסוף.

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

    הפעלת רמת היומן 'מפורט'.

  4. לוחצים על Cause Violation. הדף יפסיק להגיב למשך כמה שניות, ואז הדפדפן ירשום את ההודעה [Violation] 'click' handler took 3000ms ביומן במסוף. משך הזמן המדויק עשוי להשתנות.

    הפרה במסוף.

סינון הודעות

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

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

לכל שיטת console.* מוקצית רמת חומרה: Verbose,‏ Info,‏ Warning או Error. לדוגמה, console.log() היא הודעה ברמה Info, ואילו console.error() היא הודעה ברמה Error.

כדי לסנן לפי רמת היומן:

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

    השבתת הודעות ברמת השגיאה במסוף.

  2. לוחצים שוב על התפריט הנפתח רמות יומן ומפעילים מחדש את האפשרות שגיאות. ההודעות ברמה Error יופיעו שוב.

סינון לפי טקסט

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

  1. מקלידים Dave בתיבת הטקסט סינון. כל ההודעות שלא כוללות את המחרוזת Dave מוסתרות. יכול להיות שתראו גם את התווית Adolescent Irradiated Espionage Tortoises. זה באג.

    סינון כל הודעה שלא כוללת את 'דני'.

  2. מוחקים את Dave מתיבת הטקסט Filter. כל ההודעות יופיעו שוב.

סינון לפי ביטוי רגולרי

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

  1. מקלידים /^[AH]/ בתיבת הטקסט סינון. מקלידים את התבנית הזו ב-RegExr כדי לקבל הסבר על הפעולה שלה.

    סינון כל הודעה שלא תואמת לדפוס ‎/^[AH]/‎.

  2. מוחקים את /^[AH]/ מתיבת הטקסט Filter. כל ההודעות יהיו שוב גלויות.

סינון לפי מקור ההודעה

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

  1. לוחצים על הצגת סרגל הצד של המסוף הצגת סרגל הצד של המסוף..

    סרגל הצד.

  2. לוחצים על סמל ההרחבה הרחבה. לצד 12 הודעות. בסרגל הצד מוצגת רשימה של כתובות URL שגרמו לרישום הודעות ביומן. לדוגמה, log.js גרם ל-11 הודעות.

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

סינון לפי הודעות של משתמשים

קודם, כשלחצתם על Log Info, הופעל סקריפט בשם console.log('Hello, Console!') כדי לרשום את ההודעה ביומן במסוף. הודעות שמתועדות ביומן מ-JavaScript באופן כזה נקראות הודעות משתמש. לעומת זאת, כשלוחצים על Cause 404, הדפדפן רושם ביומן הודעה ברמה Error שבה מצוין שלא ניתן למצוא את המשאב המבוקש. הודעות כאלה נחשבות הודעות דפדפן. אתם יכולים להשתמש בסרגל הצד כדי לסנן הודעות מהדפדפן ולהציג רק הודעות ממשתמשים.

  1. לוחצים על 9 הודעות משתמש. ההודעות בדפדפן מוסתרות.

    סינון הודעות מהדפדפן.

  2. לוחצים על 12 הודעות כדי להציג שוב את כל ההודעות.

שימוש במסוף לצד כל חלונית אחרת

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

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

    הכרטיסייה **מסוף** בחלונית ההזזה.

השלבים הבאים

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