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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

   איור 3. המסוף

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

   

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

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

   

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

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

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

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

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

   

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

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

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

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

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

3. עכשיו לוחצים על הלחצן Get Data (קבלת נתונים) בהדגמה.

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

   

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

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

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

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

   

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

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

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

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

   

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

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

   

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

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

   

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

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

יצירת צילומי מסך

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

1. לוחצים על Capture Screenshots (צילום צילומי מסך) .

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

   

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

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

   

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

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

5. צריך לטעון מחדש את הדף.

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

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

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

   

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

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

   

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

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

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

   

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

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

   

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

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

   

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

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

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

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

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

   

   איור 19. החלונית Search

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

   

   איור 20. תוצאות חיפוש עבור Cache-Control

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

   

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

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

   

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

סינון משאבים

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

איור 23. סרגל הכלים Filters

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

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

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

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

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

   

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

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

   

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

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

   

   איור 26. מסנן להחרגה

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

   

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

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

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

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

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

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 block ומקישים על Enter.

   

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

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

4. צריך להקליד main.css.

   

   איור 32. החסימה של main.css תיחסם

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

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

   

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

7. מבטלים את הסימון בתיבת הסימון של Enable request blocked (הפעלת חסימת בקשות).

השלבים הבאים

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

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