ב-Codelab הזה נסביר איך לפרש את כל התנועה ברשת של אפליקציה לדוגמה, שהיא קצת מורכבת. בסוף התרגיל, יהיו לכם את הכישורים הדרושים כדי להבין מה אפליקציית האינטרנט שלכם טוענת ומתי היא שולחת כל בקשה.
עוברים לחלונית "רשת"
עוברים לחלונית "רשת" כדי לראות את התנועה ברשת של אפליקציית ההדגמה.
- מקישים על `Control+Shift+J` (או על `Command+Option+J` ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשת.
- טוענים מחדש את הדף כדי לראות את התנועה ברשת.
בחלונית "רשת" מוצגים כל הנכסים שנטענו בגלל הניווט הראשוני:
איך מפרשים את הרשומות
כל שורה של תנועה ברשת שתועדה מייצגת זוג אחד של בקשה ותגובה.
השורה הראשונה, עם הסוג document, היא בקשת הניווט הראשונית ל-HTML של אפליקציית האינטרנט. זהו המקור של ה-Waterfall. כל אחת מהבקשות הבאות לנכסים נוספים (שנקראים משאבי משנה של המסמך הראשי) מגיעה מהמקור הזה.
השורות השנייה והשלישית, שבהן מוצגת טעינה של משאבי משנה מסוג CSS stylesheet ו-script, הן בקשות תלויות שהופעלו על ידי המסמך הראשי.
אם מסתכלים על הזמן שבו הבקשות האלה נשלחות, אפשר לראות בתרשים ה-Waterfall שהן מתחילות רק בשלב מאוחר מאוד בתהליך התגובה לבקשת הניווט.
כדי להציג את הדף המלא במהלך הניווט הראשוני, צריך לשלוח את הבקשות למסמך ה-HTML, ל-CSS ול-JavaScript ביחד.
יצירת בקשות נוספות בזמן ריצה
כשהחלונית רשת עדיין פתוחה ומתעדת, הגיע הזמן לדמות משהו שקורה הרבה באפליקציות אינטרנט: בקשות API נוספות שמשמשות להוספת נתונים לדף אחרי שהניווט הראשוני הושלם.
כדי להפעיל את הבקשות הנוספות האלה, לוחצים על Find Me באפליקציה ואז על Allow בחלון הקופץ שמופיע. כך האתר יוכל לגשת למיקום הנוכחי שלכם:
אחרי שלאפליקציית האינטרנט יש מיקום לעבוד איתו, לחיצה על Find Nearby Wikipedia Entries גורמת לכמה בקשות נוספות לאחזור מהרשת. אמור להופיע משהו כזה:
פירוש הרשומות החדשות
כמו קודם, כל שורה של תנועה ברשת שתועדה מייצגת צמד יחיד של בקשה ותגובה.
השורה הראשונה של הרשומות החדשות מייצגת בקשה מסוג fetch, שתואמת לאופן שבו אפליקציית האינטרנט מבקשת נתונים מ-Wikipedia API.
השורות הבאות הן כולן תמונות (png או jpeg) שמשויכות לרשומות בוויקיפדיה. למרות שקצת קשה לראות את זה בצילום המסך, הרשומות שלהם בעמודה Waterfall מגיעות ישירות מהתגובה מה-API.
בכל הבקשות הנוספות האלה, הערך של when ישתנה בהתאם למשך הזמן שהדף היה פתוח לפני שלחצתם על Find Nearby Wikipedia Entries. הדבר החשוב ביותר כאן הוא שהמתי מנותק מבקשת הניווט הראשונית. אפשר לראות את זה לפי הפער הגדול שקיים בתצוגת ה-Waterfall, שמייצג את פרק הזמן שחלף בין הטעינה הראשונית לבין הזמן שבו נשלחה בקשת ה-API של ויקיפדיה.
בקשות שנשלחות אחרי פרק זמן מסוים לאחר הניווט נכללות בקטגוריה של "בקשות בזמן ריצה", בניגוד לקבוצת הבקשות הראשונית שמשמשת להצגת הדף כשמנווטים אליו בפעם הראשונה.
סיכום
אחרי שביצעתם את השלבים ב-Codelab הזה, אתם מכירים את הכלים שבהם אתם יכולים להשתמש כדי לנתח את מה שנטען באפליקציית אינטרנט כלשהי.
חלונית "רשת" עוזרת לכם להבין מה נטען, באמצעות כתובות ה-URL בעמודה "שם" והנתונים בעמודה "סוג", וגם מתי הוא נטען, באמצעות תצוגת ה-Waterfall.
ראיתם גם שבקשות שדף אינטרנט שולח יכולות (בדרך כלל) להיות מקובצות באחת משתי קטגוריות:
- בקשות ראשוניות, שמתבצעות מיד אחרי המעבר לדף חדש, ל-HTML, ל-JavaScript, ל-CSS (ואולי גם לנכסים אחרים).
- בקשות בזמן ריצה שנוצרות כתוצאה מאינטראקציה של המשתמש עם הדף. לרוב, התהליך הזה מתחיל בבקשה ל-API, ואז ממשיך לכמה בקשות המשך על סמך הנתונים שהתקבלו מה-API.