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

Kayce Basques

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

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

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

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

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

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

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

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

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

    כלי הפיתוח נפתחים משמאל להדגמה.

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

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

    כלי הפיתוח הוסרו מהעגינה בחלון נפרד: כלי הפיתוח הוסרו מהעגינה בחלון נפרד.

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

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

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

    המסוף אחרי שלוחצים על Log Info.

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

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

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

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

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

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

    המסוף אחרי לחיצה על Log Alert.

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

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

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

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

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

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

    הפעלת רמת יומן Verbose.

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

    הפרה במסוף.

סינון הודעות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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 כדי לקבל את הגביע.