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

Kayce Basques

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

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

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

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

1. פותחים את ההדגמה.

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

   

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

   

4. אופציונלי: מעגנים את כלי הפיתוח לתחתית החלון או מבטלים את העגינה ופותחים חלון נפרד.

   כלי הפיתוח מוצמדים לחלק התחתון של ההדגמה:

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

הצגת הודעות שנרשמו מ-JavaScript

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

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

   

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

   

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

3. אפשר לחזור אל המסוף באחת מהדרכים הבאות:

   • לוחצים על הכרטיסייה מסוף.
   • מקישים על Control+[ או על Command+[ (ב-Mac) עד שהמסוף נמצא במוקד ההתעניינות.
   • פותחים את תפריט הפקודות, מתחילים להקליד Console, בוחרים בפקודה הצגת חלונית המסוף ואז מקישים על Enter.

4. לוחצים על הלחצן Log Warning (רישום אזהרה) בהדגמה. Abandon Hope All Ye Who Enter נרשם ביומן במסוף.

   

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

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

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

   

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

7. לוחצים על Log Error (רישום שגיאה). הודעת השגיאה הבאה נרשמת ביומן: 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. לוחצים על Log Custom (רישום מותאם אישית). הודעה עם גבול אדום ורקע כחול נרשמת ביומן במסוף.

    

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

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

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

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

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

   

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

   

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

   

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

   

סינון הודעות

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

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

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

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

הערה: רשימה מלאה של console.* methods ורמות החומרה שלהם מופיעה בהפניית Console API.

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

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

   

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

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

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

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

1. מקלידים Dave בתיבה Filter. כל ההודעות שלא כוללות את המחרוזת Dave מוסתרות.

   

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

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

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

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

   

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

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

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

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

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

   

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

   

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

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

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

   

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

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

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

1. לוחצים על הכרטיסייה רכיבים.

2. מקישים על Escape. הכרטיסייה Console של Drawer נפתחת. הוא כולל את כל התכונות של המסוף שבהן השתמשתם במהלך ההדרכה הזו.

   

השלבים הבאים

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

• במאמר Console Reference אפשר לקרוא על תכונות נוספות ועל תהליכי עבודה שקשורים לממשק המשתמש של Console.
• במאמר Console API Reference אפשר לקרוא על כל השיטות של console שהוצגו במאמר View messages logged from JavaScript, ולעיין בשיטות אחרות של console שלא נכללו במדריך הזה.
• במאמר תחילת העבודה מוסבר מה עוד אפשר לעשות באמצעות כלי הפיתוח.
• במאמר עיצוב הודעות ב-Console מוסבר על כל השיטות לעיצוב הודעות ב-Console.console