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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

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

   

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

   

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

   

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

   

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

   

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

   

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

   

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

לכידת צילומי מסך

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

כדי לצלם צילומי מסך:

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

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

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

   

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

   

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

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

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

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

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

   

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

   

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

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

   

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

   

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

   

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

   

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

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

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

1. לוחצים על חיפוש חיפוש בסרגל הפעולות של החלונית או מקישים על Command + F (macOS) או על Control + F (Windows / Linux).

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

   

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

   

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

   

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

   

סינון המשאבים

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

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

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

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

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

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

   

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

   

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

   

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

   

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

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

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

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

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

   

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

   

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

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

בקשות חסימה

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

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

   

2. מקלידים block, בוחרים באפשרות הצגת חסימת בקשות ומקישים על Enter.

   

3. לוחצים על הלחצן הוספת תבנית.

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

   

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

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

   

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

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