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

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

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

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

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

באופן כללי, כדאי להשתמש בחלונית 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 איטי.

    בחירה ב-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. לוחצים על סמל החיפוש חיפוש. חלונית החיפוש תיפתח מימין ליומן הרשת.

    החלונית Search

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

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

    תוצאות חיפוש עבור סמל המטמון

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

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

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

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

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

    לחצני הסגירה

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

סינון משאבים

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

סרגל הכלים Filters

איור 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. כל שאר סוגי הקבצים מסוננים.

    מוצגים רק קובצי CSS

    איור 28. מוצגים רק קובצי CSS

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

    מוצגים קובצי CSS ו-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.

    חסימה של Main.css

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

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

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

    Main.css נחסם

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

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

השלבים הבאים

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

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