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

קייס בסקית

Twitter GitHub תקלה

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

   

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

   

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

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

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

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

   

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

    

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

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

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

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

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

   

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

   

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

   

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

   

סינון הודעות

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

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

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

לכל שיטה 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. כל ההודעות מוצגות שוב.

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

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

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

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

   

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

   

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

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

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

   

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

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

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

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

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

   

השלבים הבאים

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

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