בדיקה של הפעילות ברשת

קייס בסקית

Twitter GitHub תקלה

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

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

אפשר להמשיך לקרוא או לצפות בגרסת הווידאו של המדריך:

מתי להשתמש בחלונית 'רשת'

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

• לוודא שאכן מתבצעת העלאה או הורדה של המשאבים.
• בדיקת המאפיינים של משאב מסוים, כגון כותרות ה-HTTP, התוכן, הגודל וכו'.

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

פתיחת החלונית 'רשת'

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

1. פותחים את ההדגמה של תחילת העבודה.

   

   איור 1. ההדגמה

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

   

   איור 2. ההדגמה בחלון אחד והמדריך הזה בחלון אחר

2. פותחים את כלי הפיתוח על ידי הקשה על Control+Shift+J או על Command+Option+J (Mac). החלונית Console תיפתח.

   

   איור 3. הקונסולה

   יכול להיות שתעדיפו להציב את כלי הפיתוח לתחתית החלון.

   

   איור 4. כלי הפיתוח מוצמדים לתחתית החלון

3. לוחצים על הכרטיסייה רשתות. החלונית 'רשת' תיפתח.

   

   איור 5. כלי הפיתוח מוצמדים לתחתית החלון

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

תיעוד הפעילות ברשת

כדי להציג את הפעילות ברשת שגורם דף מסוים:

1. לטעון מחדש את הדף. החלונית 'רשת' מתעדת את כל פעילות הרשת ביומן הרשת.

   

   איור 6. יומן הרשת

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

   כל עמודה מייצגת מידע על משאב. איור 6 מציג את עמודות ברירת המחדל:

   • סטטוס. קוד התגובה של ה-HTTP.
   • סוג. סוג המשאב.
   • יוזם. מה גרם לבקשת משאב. לחיצה על קישור בעמודה 'יוזם' תעביר אתכם לקוד המקור שגרם לבקשה.
   • זמן. כמה זמן נמשך תהליך הבקשה.

   • מפל. ייצוג גרפי של השלבים השונים של הבקשה. מעבירים את העכבר מעל Waterfall כדי לראות פירוט.

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

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

3. כעת, לוחצים על הלחצן קבלת נתונים בהדגמה.

4. מעיינים שוב בחלק התחתון של יומן הרשת. יש משאב חדש בשם getstarted.json. לחיצה על הלחצן קבלת נתונים גרמה לדף לבקש את הקובץ הזה.

   

   איור 7. משאב חדש ביומן הרשת

הצגת מידע נוסף

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

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

   

   איור 8. הפעלת העמודה דומיין

הערה: טיפ: כדי לראות את כתובת ה-URL המלאה של משאב, אפשר להעביר את העכבר מעל התא שלו בעמודה שם.

הדמיית חיבור איטי יותר לרשת

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

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

   

   איור 9. הפעלה של ויסות נתונים

2. בוחרים באפשרות 3G איטי.

   

   איור 10. בחירה ב-3G איטי

3. לוחצים לחיצה ארוכה על Reload ואז בוחרים באפשרות Empty Cache and Hard Reload.

   

   איור 11. ריקון המטמון וטעינה מחדש קשיחה

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

   הערה: הערה: תהליך העבודה ריקון המטמון וטעינה מחדש קשיחה זמין רק כשכלי הפיתוח פתוחים.

צילום מסך

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

1. לוחצים על צילום מסך .

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

   

   איור 12. צילומי מסך של טעינת הדף

3. לוחצים על התמונה הממוזערת הראשונה. כלי הפיתוח מציגים את הפעילות ברשת שהתרחשה באותו רגע.

   

   איור 13. הפעילות ברשת שהתרחשה בצילום המסך הראשון

4. לוחצים שוב על Capture Screenshots כדי לסגור את חלונית צילומי המסך.

5. טוענים שוב את הדף.

בדיקת פרטי משאב

לוחצים על משאב כדי לקבל מידע נוסף לגביו. ננסה עכשיו:

1. לוחצים על getstarted.html. הכרטיסייה כותרות מוצגת. השתמשו בכרטיסייה הזו כדי לבדוק כותרות HTTP.

   

   איור 14. הכרטיסייה 'כותרות'

2. לוחצים על הכרטיסייה Preview (תצוגה מקדימה). מוצג רינדור בסיסי של ה-HTML.

   

   איור 15. הכרטיסייה 'תצוגה מקדימה'

   הכרטיסייה הזו שימושית כש-API מחזיר קוד שגיאה ב-HTML, וקל יותר לקרוא את ה-HTML שעבר רינדור מאשר את קוד המקור של ה-HTML, או כשבודקים תמונות.

3. לוחצים על הכרטיסייה תגובה. מוצג קוד המקור של ה-HTML.

   

   איור 16. הכרטיסייה 'תגובה'

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

4. לוחצים על הכרטיסייה תזמון. מוצג פירוט של הפעילות ברשת עבור המשאב הזה.

   

   איור 17. הכרטיסייה 'תזמון'

5. לוחצים על Close כדי להציג שוב את יומן הרשת.

   

   איור 18. הלחצן 'סגירה'

חיפוש כותרות ותגובות של רשת

תוכלו להשתמש בחלונית Search כדי לחפש מחרוזת מסוימת או ביטוי רגולרי מסוים בכותרות ובתגובות ה-HTTP של כל המשאבים.

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

1. לוחצים על חיפוש . חלונית החיפוש תיפתח מימין ליומן Network.

   

   איור 19. חלונית החיפוש

2. מקלידים Cache-Control ומקישים על Enter. בחלונית החיפוש מפורטים כל המופעים של Cache-Control שמופיעים בכותרות או בתוכן של המשאבים.

   

   איור 20. תוצאות לחיפוש "Cache-Control"

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

   

   איור 21. תוצאת חיפוש שמודגשת בכרטיסייה 'כותרות'

4. סגור את חלונית החיפוש ואת הכרטיסייה 'תזמון'.

   

   איור 22. הלחצנים 'סגירה'

סינון משאבים

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

איור 23. סרגל הכלים 'מסננים'

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

1. לוחצים על סינון כדי להציג אותה.

סינון לפי מחרוזת, ביטוי רגולרי או מאפיין

תיבת הטקסט מסנן תומכת בסוגים רבים ושונים של סינון.

1. מקלידים png בתיבת הטקסט מסנן. יוצגו רק הקבצים שמכילים את הטקסט png. במקרה הזה הקבצים היחידים שתואמים למסנן הם תמונות ה-PNG.

   

   איור 24. מסנן מחרוזות

2. מקלידים /.*\.[cj]s+$/. כלי הפיתוח מסננים כל משאב עם שם קובץ שלא מסתיים ב-j או ב-c ואחריו תו אחד או יותר של s.

   

   איור 25. מסנן של ביטויים רגולריים

3. מקלידים -main.css. כלי הפיתוח מסננים את main.css. אם קובץ אחר מתאים לתבנית, גם הוא יסונן.

   

   איור 26. מסנן שלילי

4. מקלידים domain:raw.githubusercontent.com בתיבת הטקסט מסנן. כלי הפיתוח מסננים את כל המשאבים עם כתובת URL שלא תואמת לדומיין.

   

   איור 27. מסנן נכסים

   הרשימה המלאה של המאפיינים שניתן לסנן מופיעה במאמר סינון בקשות לפי מאפיינים.

5. מנקים את תיבת הטקסט מסנן מכל טקסט שהוא.

סינון לפי סוג המשאב

כדי להתמקד בסוג מסוים של קובץ, כמו גיליונות סגנונות:

1. לוחצים על CSS. כל שאר סוגי הקבצים מסוננים.

   

   איור 28. הצגת קובצי CSS בלבד

2. כדי לראות גם סקריפטים, מחזיקים את המקש Control או Command (Mac) ואז לוחצים על JS.

   

   איור 29. המערכת מציגה קובצי CSS ו-JS בלבד

3. לוחצים על הכול כדי להסיר את המסננים ולראות שוב את כל המשאבים.

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

חסימת בקשות

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

1. מקישים על Control+Shift+P או על Command+Shift+P (Mac) כדי לפתוח את תפריט הפקודות.

   

   איור 30. תפריט הפקודות

2. מקלידים block, בוחרים באפשרות Show Request Encrypt ומקישים על Enter.

   

   איור 31. הצגה של חסימת בקשות

3. לוחצים על הוספת דפוס .

4. מקלידים main.css.

   

   איור 32. החסימה של main.css מתבצעת

5. לוחצים על הוספה.

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

   

   איור 33. הפריט main.css נחסם

7. מבטלים את הסימון של התיבה הפעלת חסימה של בקשות.

השלבים הבאים

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

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