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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

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

   

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

   

   מומלץ להצמיד את DevTools לתחתית החלון.

   

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

   

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

   

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

   

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

   

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

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

צילום מסך

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

כדי לצלם את המסך:

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

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

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

   

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

   

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

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

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

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

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

   

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

   

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

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

   

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

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

   

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

   

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

   

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

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

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

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

   

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

   

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

   

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

   

סינון משאבים

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

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

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

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

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

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

   

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

   

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

   

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

   

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

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

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

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

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

   

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

   

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

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

חסימת בקשות

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

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

   

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

   

3. לוחצים על הלחצן Add Pattern (הוספת דפוס).

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

   

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

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

   

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

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