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

Kayce Basques

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

   

2. ליד ההודעה Hello, Console! במסוף, לוחצים על 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 מתועד במסוף.

   

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

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 של הדף ניסה לאחזר קובץ שלא קיים.

   

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

   

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

   

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

   

סינון הודעות

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

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

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

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

הערה: רשימה מלאה של שיטות console.* ורמות החומרה שלהן מפורטת במאמר העזרה של Console API.

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

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

   

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

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

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

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

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

   

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

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

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

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

   

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

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

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

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

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

   

השלבים הבאים

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

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