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

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

   

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

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

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

4. לוחצים על הלחצן LogWarning בהדגמה. Abandon Hope All Ye Who Enter נרשם במסוף.

   

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

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

6. לוחצים על הסמל Expand מול 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. לוחצים על קבוצת יומנים. השמות של 4 צבים מפורסמים שנלחמים בפשע מקובצים תחת התווית Adolescent Irradiated Espionage Tortoises.

   

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

    

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

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

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

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

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

   

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

   

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

   

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

   

סינון הודעות

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

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

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

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

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

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

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

   

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

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

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

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

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

   

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

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

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

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

   

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

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

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

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

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

   

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

   

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

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

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

   

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

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

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

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

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

   

השלבים הבאים

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

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