החלונית 'מה חדש ב-DevTools Network'

Jeff Posnick

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

עוברים לחלונית הרשת

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

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

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

3. לוחצים על הכרטיסייה רשתות.

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

בחלונית Network מוצגים כל הנכסים שנטענו בגלל הניווט הראשוני:

איך מפרשים את הרשומות

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

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

השורות השנייה והשלישית, שבהן מוצגים CSS stylesheet ומשאב משנה script שנטענים, הן בקשות תלויות שהופעלו על ידי המסמך הראשי.

מתי נשלחות הבקשות האלה? לפי תרשים Waterfall, הן נשלחות בשלב מאוחר מאוד בתהליך התגובה לבקשת הניווט.

ביחד, הבקשות למסמך ה-HTML, ל-CSS ול-JavaScript נדרשות כדי להציג את הדף המלא במהלך הניווט הראשוני.

יצירת כמה בקשות נוספות בסביבת זמן הריצה

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

כדי להפעיל את הבקשות הנוספות האלה, לוחצים על Find Me (חיפוש שלי) באפליקציה ואז על Allow (אישור) בחלון הקופץ שמופיע. כך האתר יוכל לגשת למיקום הנוכחי שלכם:

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

פרשנות של הרשומות החדשות

כמו קודם, כל שורה של תנועת רשת מתועדת מייצגת צמד של בקשה ותגובה.

השורה הראשונה של הרשומות החדשות מייצגת בקשה מסוג fetch, שמתאימה לדרך שבה אפליקציית האינטרנט מבקשת נתונים מ-Wikipedia API.

כל השורות הבאות הן תמונות (png או jpeg) שמשויכות לערכים בוויקיפדיה. קשה לראות את זה בצילום המסך, אבל הרשומות שלהם בעמודה Waterfall מגיעות ישירות מהתגובה של ה-API.

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

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

סיכום

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

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

ראינו גם שאפשר (בדרך כלל) לקבץ בקשות שנשלחות מדף אינטרנט לאחת משתי קטגוריות:

1. בקשות ראשוניות שנשלחות מיד אחרי שמנווטים לדף חדש, עבור HTML,‏ JavaScript,‏ CSS (ויכול להיות גם נכסים אחרים).
2. בקשות בסביבת זמן הריצה שנשלחות כתוצאה מאינטראקציה של משתמש עם הדף. לרוב, התהליך מתחיל בבקשה ל-API, ולאחר מכן מתפתח לכמה בקשות המשך על סמך נתוני ה-API שאוחזרו.