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

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

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

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

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

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

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

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

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

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

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

    אתר ההדגמה.

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

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

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

    חלונית המסוף ב-Devtools.

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

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

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

    חלונית הרשת של DevTools מוצמדת לתחתית החלון.

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

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

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

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

    יומן הרשת עם 5 בקשות.

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

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

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

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

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

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

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

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

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

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

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

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

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

    התפריט הנפתח של הגבלת רוחב הפס בחלונית 'רשת'.

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

    בחירת 3G בחלונית 'רשת'.

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

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

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

צילום מסך

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

כדי לצלם את המסך, פועלים לפי השלבים הבאים:

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

  2. מסמנים את התיבה של צילומי מסך.

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

    צילומי מסך של טעינת הדף בחלונית 'רשת'.

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

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

  5. משנים את המצב של תיבת הסימון צילומי מסך כדי לסגור את הכרטיסייה 'צילומי מסך'.

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

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

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

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

    בכרטיסייה Headers (כותרות) בחלונית Network (רשת).

  2. לוחצים על הכרטיסייה Preview כדי להציג עיבוד HTML בסיסי.

    הכרטיסייה 'תצוגה מקדימה' בחלונית 'רשת'.

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

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

    הכרטיסייה 'תגובה' בחלונית 'רשת'.

  4. לוחצים על הכרטיסייה Initiator (מבצע הקריאה) כדי להציג עץ שממפה את שרשרת מבצע הקריאה.

    הכרטיסייה Initiator בחלונית Network.

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

    הכרטיסייה 'תזמון' בחלונית 'רשת'.

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

    הלחצן 'סגירה' של כרטיסיית הפרטים.

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

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

  1. לוחצים על חיפוש . הכרטיסייה Search (חיפוש) נפתחת משמאל ליומן הרשת.

    הכרטיסייה Search (חיפוש) שמשמאל ליומן הרשת.

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

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

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

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

  4. סוגרים את הכרטיסייה חיפוש ואת הכרטיסייה כותרות.

    לחצני 'סגירה'.

סינון משאבים

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

סרגל הכלים של המסננים.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    חלונית הרשת שבה מוצגים רק קובצי CSS.

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

    חלונית רשת שמוצגים בה קובצי CSS ו-JS בלבד.

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

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

חסימת בקשות

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

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

    תפריט הפקודות בחלונית הרשת.

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

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

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

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

    חסימה של main.css בחלונית 'רשת'

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

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

    הקובץ main.css נחסם.

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

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