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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

   

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

   

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

   

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

   

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

   

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

   

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

   

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

   

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

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

צילום מסך

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

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

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

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

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

   

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

   

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. לוחצים על תוצאה כדי להציג אותה. אם השאילתה נמצאה בכותרת, הכרטיסייה 'כותרות' תיפתח. אם השאילתה נמצאה בתוכן, תיפתח הכרטיסייה Response.

   

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

   

סינון משאבים

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

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

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

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

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

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

   

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

   

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

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

חסימת בקשות

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

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

   

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

   

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

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

   

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

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

   

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

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