המדריך האינטראקטיבי הזה מראה איך לרשום הודעות ולסנן אותן במסוף כלי הפיתוח ל-Chrome.
השלמת המדריך הזה תתבצע לפי הסדר. אנחנו יוצאים מנקודת הנחה שאתם מבינים את היסודות של פיתוח אתרים, למשל איך להשתמש ב-JavaScript כדי להוסיף אינטראקטיביות לדף.
הגדרת ההדגמה וכלי הפיתוח
המדריך הזה נועד לאפשר לכם לפתוח את ההדגמה ולנסות את כל תהליכי העבודה בעצמכם. אם עוקבים אחרי הפעילות הפיזית, יש סיכוי גבוה יותר שתזכור את תהליכי העבודה בהמשך.
- פותחים את ההדגמה.
אם רוצים, מעבירים את ההדגמה לחלון נפרד. בדוגמה הזו, המדריך נמצא בצד שמאל, וההדגמה נמצאת בצד ימין.
מתמקדים בהדגמה ולוחצים על Control+Shift+J או Command+Option+J (Mac) כדי לפתוח את כלי הפיתוח. כברירת מחדל, כלי הפיתוח נפתחים משמאל להדגמה.
אופציונלי: מחברים את כלי הפיתוח לתחתית החלון או מבטלים את העגינה בחלון נפרד.
כלי הפיתוח מוצמדים לתחתית ההדגמה:
כלי הפיתוח הוסרו מהעגינה בחלון נפרד:
הצגת הודעות שנרשמו ביומן מ-JavaScript
רוב ההודעות שרואים במסוף מגיעות ממפתחי אתרים שכתבו את ה-JavaScript של הדף. מטרת הקטע הזה היא להציג בפניכם את סוגי ההודעות השונים שסביר להניח שתראו במסוף, ולהסביר איך אתם יכולים לתעד כל סוג הודעה בעצמכם ב-JavaScript משלכם.
לוחצים על הלחצן Log Info בהדגמה.
Hello, Console!
נרשם במסוף.ליד ההודעה
Hello, Console!
במסוף, לוחצים על log.js:2. החלונית Sources נפתחת ומדגישה את שורת הקוד שהובילה לרישום ההודעה במסוף.ההודעה נרשמה כשקוד ה-JavaScript של הדף נקרא
console.log('Hello, Console!')
.חוזרים למסוף באמצעות אחד מתהליכי העבודה הבאים:
- לוחצים על הכרטיסייה מסוף.
- מקישים על Control+[ או Command+[ (Mac) עד שהמיקוד של המסוף יהיה.
- פותחים את תפריט הפקודות, מתחילים להקליד
Console
, בוחרים בפקודה Show Console Panel ולוחצים על Enter.
לוחצים על הלחצן LogWarning בהדגמה.
Abandon Hope All Ye Who Enter
נרשם במסוף.הודעות בפורמט הזה הן אזהרות.
אופציונלי: לוחצים על log.js:12 כדי להציג את הקוד שגרם ליצירת ההודעה בפורמט הזה, ובסיום חוזרים ל-Console. אפשר לעשות את זה בכל פעם שרוצים לראות את הקוד שגרם לרישום הודעה מסוימת ביומן.
לוחצים על הסמל Expand מול
Abandon Hope All Ye Who Enter
. בכלי הפיתוח מוצג דוח הקריסות שמוביל לקריאה.לפי דוח הקריסות, הפונקציה בשם
logWarning
נקראה לפונקציהquoteDante
. במילים אחרות, הקריאה שהתרחשה ראשונה נמצאת בחלק התחתון של דוח הקריסות. אפשר לרשום את דוחות הקריסות בכל שלב באמצעות קריאה ל-console.trace()
.לוחצים על Log Error. הודעת השגיאה הבאה מתועדת:
I'm sorry, Dave. I'm afraid I can't do that.
לוחצים על Log Table. טבלה של אומנים מפורסמים מתעדת נתונים במסוף.
חשוב לשים לב שהעמודה
birthday
מאוכלסת רק בשורה אחת. בודקים את הקוד כדי להבין את הסיבה לכך.לוחצים על קבוצת יומנים. השמות של 4 צבים מפורסמים שנלחמים בפשע מקובצים תחת התווית
Adolescent Irradiated Espionage Tortoises
.לוחצים על Log Custom (יומן בהתאמה אישית). הודעה עם מסגרת אדומה ורקע כחול תתועד במסוף.
הרעיון העיקרי כאן הוא שכאשר רוצים לרשום הודעות במסוף מ-JavaScript, צריך להשתמש באחת מה-methods console
. כל שיטה מעצבת את ההודעות באופן שונה.
קיימות אפילו יותר שיטות ממה שראינו בקטע הזה. בסוף המדריך תלמדו איך להכיר את שאר השיטות.
הצגת הודעות שנרשמו על ידי הדפדפן
גם הדפדפן רושם הודעות במסוף. זה קורה בדרך כלל כשיש בעיה בדף.
לוחצים על סיבה 404. הדפדפן רושם שגיאת רשת
404
כי ה-JavaScript של הדף ניסה לאחזר קובץ שלא קיים.לוחצים על הסיבה לשגיאה. הדפדפן רושם את
TypeError
שלא זוהה כי ה-JavaScript מנסה לעדכן צומת DOM שלא קיים.לוחצים על התפריט הנפתח Logs Levels ומפעילים את האפשרות Verbose אם היא מושבתת. מידע נוסף על סינון מופיע בקטע הבא. אתם צריכים לעשות את זה כדי לוודא שההודעה הבאה שתירשם תהיה גלויה. הערה: אם התפריט הנפתח Default Levels מושבת, יכול להיות שתצטרכו לסגור את סרגל הצד של המסוף. למידע נוסף על סרגל הצד של המסוף, אפשר לסנן לפי מקור ההודעות שבהמשך.
לוחצים על סיבה להפרה. הדף לא מגיב למשך כמה שניות ואז הדפדפן רושם את ההודעה
[Violation] 'click' handler took 3000ms
במסוף. משך הזמן המדויק עשוי להשתנות.
סינון הודעות
בחלק מהדפים תראו שהמסוף מוצף בהודעות. בכלי הפיתוח יש הרבה דרכים לסנן הודעות שלא רלוונטיות למשימה שרוצים לבצע.
סינון לפי רמת היומן
לכל שיטה של console.*
מוקצית רמת חומרה: Verbose
, Info
, Warning
או Error
. לדוגמה, console.log()
היא הודעה ברמת Info
, ואילו console.error()
היא הודעה ברמת Error
.
כדי לסנן לפי רמת יומן:
לוחצים על התפריט הנפתח רמות רישום ביומן ומשביתים את האפשרות שגיאות. רמה מושבתת כשאין יותר סימן וי לצדה. ההודעות ברמת
Error
ייעלמו.לוחצים שוב על התפריט הנפתח רמות רישום ביומן ומפעילים מחדש את האפשרות שגיאות. ההודעות ברמת
Error
יופיעו שוב.
סינון לפי טקסט
כדי לראות רק הודעות שכוללות מחרוזת מדויקת, מקלידים את המחרוזת הזו בתיבת הטקסט Filter.
מקלידים
Dave
בתיבת הטקסט Filter. כל ההודעות שלא כוללות את המחרוזתDave
מוסתרות. יכול להיות שתופיע גם התוויתAdolescent Irradiated Espionage Tortoises
. זה באג.מוחקים את
Dave
מתיבת הטקסט Filter. כל ההודעות יופיעו שוב.
סינון לפי ביטוי רגולרי
כדי להציג את כל ההודעות שכוללות דפוס טקסט במקום מחרוזת ספציפית, צריך להשתמש בביטוי רגולרי.
מקלידים
/^[AH]/
בתיבת הטקסט Filter. מקלידים את הדפוס הזה ב-RegExr כדי לקבל הסבר על הפעולה.מוחקים את
/^[AH]/
מתיבת הטקסט Filter. כל ההודעות גלויות שוב.
סינון לפי מקור ההודעה
כדי להציג רק את ההודעות שנשלחו מכתובת URL מסוימת, משתמשים בסרגל הצד.
לוחצים על הצגת סרגל הצד של המסוף .
לוחצים על הסמל Expand לצד 12 Messages. סרגל הצד מציג רשימה של כתובות URL שגרמו לרישום ההודעות ביומן. לדוגמה,
log.js
יצר 11 הודעות.
סינון לפי הודעות משתמש
מוקדם יותר, כשלחצתם על Log Info, נוצר סקריפט בשם console.log('Hello, Console!')
כדי לרשום את ההודעה במסוף. הודעות שנרשמות ביומן מ-JavaScript בצורה כזו נקראות הודעות משתמשים. לעומת זאת, כשלחצתם על Cause 404, הדפדפן תיעד הודעה ברמת Error
על כך שלא ניתן למצוא את המשאב המבוקש. הודעות כאלה נחשבות להודעות בדפדפן. אפשר להשתמש בסרגל הצד כדי לסנן את ההודעות בדפדפן ולהציג רק הודעות למשתמשים.
לוחצים על 9 הודעות למשתמש. הודעות הדפדפן מוסתרות.
לוחצים על 12 הודעות כדי להציג שוב את כל ההודעות.
משתמשים במסוף לצד כל חלונית אחרת
מה קורה אם אתם עורכים סגנונות, אבל צריכים לחפש משהו במהירות ביומן המסוף? משתמשים בחלונית ההזזה.
- לוחצים על הכרטיסייה Elements (רכיבים).
מקישים על Escape. הכרטיסייה המסוף של ה-נפתחת. הוא כולל את כל התכונות של המסוף שהשתמשתם בהן במדריך הזה.
השלבים הבאים
כל הכבוד, השלמת את המדריך. לוחצים על Dispense Trophy כדי לקבל את הגביע.
- בחומר העזר בנושא המסוף תוכלו למצוא עוד תכונות ותהליכי עבודה שקשורים לממשק המשתמש של המסוף.
- אפשר לעיין בחומר העזר בנושא API של המסוף כדי לקבל מידע נוסף על כל השיטות
console
שהוצגו בהדגמה במאמר הצגת הודעות שנרשמו ביומן מ-JavaScript ועל השיטות האחרותconsole
שלא נלמדו במדריך הזה. - במאמר שנתחיל? מוסבר מה עוד אפשר לעשות עם כלי הפיתוח.
- למידע נוסף על כל שיטות הפורמט והסגנון של
console
, אפשר לעיין במאמר עיצוב וסגנון של הודעות במסוף.