הסבר על תכונות הרשת

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

הקלטת בקשות רשת

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

הפסקת ההקלטה של בקשות רשת

כדי להפסיק את הבקשות להקלטה:

• לוחצים על הפסקת ההקלטה של יומן הרשת בחלונית רשת. הוא יוצג באפור כדי לציין שכלי הפיתוח כבר לא מתעדים בקשות.
• מקישים על Command> + E (ב-Mac) או על Control + E (ב-Windows וב-Linux) כשהחלונית Network (רשת) נמצאת במוקד.

ניקוי הבקשות

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

שמירת בקשות במהלך טעינת דפים

כדי לשמור בקשות במהלך טעינת דפים, מסמנים את התיבה Preserve log (שמירת היומן) בחלונית Network (רשת). כלי הפיתוח שומרים את כל הבקשות עד שמשביתים את האפשרות שמירת היומן.

תיעוד של צילומי מסך במהלך טעינת הדף

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

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

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

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

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

הפעלה מחדש של בקשת XHR

כדי להפעיל מחדש בקשת XHR, מבצעים אחת מהפעולות הבאות בטבלה Requests (בקשות):

• בוחרים את הבקשה ומקישים על R.
• לוחצים לחיצה ימנית על הבקשה ובוחרים באפשרות Replay XHR.

שינוי התנהגות הטעינה

השבתת מטמון הדפדפן כדי לדמות מבקרים חדשים

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

השבתת מטמון הדפדפן מהחלונית Network conditions (תנאי הרשת)

אם רוצים להשבית את המטמון בזמן שעובדים בחלוניות אחרות של DevTools, אפשר להשתמש במגירה Network conditions.

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

ניקוי המטמון בדפדפן באופן ידני

כדי לנקות את מטמון הדפדפן באופן ידני בכל שלב, לוחצים לחיצה ימנית במקום כלשהו בטבלה Requests ובוחרים באפשרות Clear browser cache.

הדמיה של מצב אופליין

יש סוג חדש של אפליקציות אינטרנט שנקרא Progressive Web Apps, שיכולות לפעול במצב אופליין בעזרת service workers. כשמפתחים אפליקציה מהסוג הזה, כדאי שתהיה אפשרות לדמות במהירות מכשיר ללא חיבור נתונים.

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

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

הדמיה של חיבורים איטיים לרשת

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

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

יצירת פרופילים מותאמים אישית של הגבלת קצב העברת נתונים

בנוסף להגדרות קבועות מראש, כמו 4G איטי או מהיר, אפשר גם להוסיף פרופילים מותאמים אישית של הגבלת קצב העברת נתונים:

1. פותחים את התפריט Throttling (הגבלת קצב העברת נתונים) ובוחרים באפשרות Custom (התאמה אישית) > Add...‎ (הוספה).
2. מגדירים פרופיל חדש להגבלת קצב העברת נתונים כמו שמתואר בהגדרות הגדרות > הגבלת קצב העברת נתונים.

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

   

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

ויסות נתונים (throttle) של חיבורי WebSocket

בנוסף לבקשות HTTP, כלי הפיתוח מגבילים את קצב העברת הנתונים בחיבורי WebSocket החל מגרסה 99.

כדי לראות את הגבלת רוחב הפס של WebSocket:

1. מתחילים חיבור חדש, למשל באמצעות כלי בדיקה.
2. בחלונית Network, בוחרים באפשרות No throttling ושולחים הודעה דרך החיבור.
3. יוצרים פרופיל מותאם אישית של ויסות נתונים עם קצב העברה איטי מאוד, למשל 10 kbit/s. פרופיל איטי כזה יעזור לכם להבחין בהבדל.
4. בחלונית רשת, בוחרים את הפרופיל ושולחים הודעה נוספת.
5. מעבירים את המסנן WS למצב מופעל, לוחצים על שם החיבור, פותחים את הכרטיסייה Messages ובודקים את הפרש הזמן בין ההודעות שנשלחו לבין ההודעות שהתקבלו עם ובלי הגבלת קצב. לדוגמה:

אמולציה של חיבורים איטיים לרשת מהמגירה Network conditions (תנאי הרשת)

אם רוצים להגביל את חיבור הרשת בזמן שעובדים בחלוניות אחרות של DevTools, אפשר להשתמש במגירה Network conditions.

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

מחיקה ידנית של קובצי Cookie בדפדפן

כדי למחוק ידנית את קובצי ה-Cookie של הדפדפן בכל שלב, לוחצים לחיצה ימנית במקום כלשהו בטבלה Requests ובוחרים באפשרות Clear browser cookies.

שינוי כותרות תגובת HTTP

איך עוקפים קבצים וכותרות של תגובות HTTP באופן מקומי

שינוי סוכן המשתמש

כדי לשנות את סוכן המשתמש באופן ידני:

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

בקשות חיפוש

כדי לחפש בכותרות של בקשות, במטענים ובמענה:

1. מקישים על קיצור הדרך הבא כדי לפתוח את הכרטיסייה חיפוש בצד שמאל:

   • ב-macOS, מקישים על Command + F.
   • ב-Windows או Linux, ‏ Control + F.

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

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

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

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

סינון בקשות

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

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

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

כדי להפוך את המסנן, מסמנים את תיבת הסימון היפוך לצד התיבה מסנן.

אפשר להשתמש בכמה נכסים בו-זמנית. כדי לעשות את זה, מפרידים ביניהם ברווח. לדוגמה, mime-type:image/gif larger-than:1K מציג את כל קובצי ה-GIF שגדולים מקילובייט אחד. המסננים האלה של כמה נכסים שווים לפעולות AND. אין תמיכה בפעולות OR.

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

• cookie-domain. הצגת המשאבים שמגדירים דומיין ספציפי של קובץ Cookie.
• ‫cookie-name. הצגת המשאבים שמגדירים שם ספציפי של קובץ Cookie.
• ‫cookie-path. הצגת המשאבים שמגדירים נתיב ספציפי של קובץ Cookie.
• cookie-value. הצגת המשאבים שמגדירים ערך ספציפי של קובץ Cookie.
• ‫domain. הצגת משאבים רק מהדומיין שצוין. אפשר להשתמש בתו כללי לחיפוש (*) כדי לכלול כמה דומיינים. לדוגמה, הפקודה *.com מציגה משאבים מכל שמות הדומיינים שמסתיימים ב-.com. ב-DevTools, התפריט הנפתח להשלמה אוטומטית מתמלא בכל הדומיינים שהכלי נתקל בהם.
• has-overrides. הצגת בקשות שבוטלו content, headers, כל הביטולים (yes) או ללא ביטולים (no). אפשר להוסיף את העמודה המתאימה 'יש ביטולים' לטבלת הבקשות.
• ‫has-response-header. הצגת המשאבים שמכילים את כותרת תגובת ה-HTTP שצוינה. כלי הפיתוח מאכלס את התפריט הנפתח של ההשלמה האוטומטית בכל כותרות התגובה שהוא נתקל בהן.
• is. משתמשים ב-is:running כדי למצוא משאבי WebSocket.
• ‫larger-than. הצגת משאבים שהגודל שלהם גדול מהגודל שצוין, בבייטים. הגדרת ערך של 1000 שוות ערך להגדרת ערך של 1k.
• ‫method. הצגת משאבים שאוחזרו באמצעות סוג מסוים של שיטת HTTP. כלי הפיתוח מאכלס את התפריט הנפתח של ההשלמה האוטומטית בכל שיטות ה-HTTP שהוא נתקל בהן.
• ‫mime-type. הצגת משאבים מסוג MIME שצוין. כלי הפיתוח מאכלס את התפריט הנפתח של ההשלמה האוטומטית בכל סוגי ה-MIME שהוא נתקל בהם.
• mixed-content. הצגת כל מקורות המידע של תוכן מעורב (mixed-content:all) או רק אלה שמוצגים (mixed-content:displayed).
• ‫priority. הצגת משאבים שרמת העדיפות שלהם תואמת לערך שצוין.
• ‫resource-type. הצגת משאבים מסוג מסוים, למשל תמונה. כלי הפיתוח מאכלס את התפריט הנפתח של ההשלמה האוטומטית בכל סוגי המשאבים שהוא נתקל בהם.
• ‫response-header-set-cookie. הצגת כותרות גולמיות של Set-Cookie בכרטיסייה Issues (בעיות). קובצי Cookie שגויים עם כותרות Set-Cookie שגויות יסומנו בחלונית Network.
• ‫scheme. הצגת משאבים שאוחזרו באמצעות HTTP לא מוגן (scheme:http) או HTTPS מוגן (scheme:https).
• ‫set-cookie-domain. הצגת המשאבים עם כותרת Set-Cookie ומאפיין Domain שתואמים לערך שצוין. כלי הפיתוח מאכלס את ההשלמה האוטומטית בכל דומייני ה-Cookie שהוא נתקל בהם.
• ‫set-cookie-name. הצגת המשאבים שיש להם כותרת Set-Cookie עם שם שתואם לערך שצוין. כלי הפיתוח מאכלסים את ההשלמה האוטומטית בכל שמות קובצי ה-Cookie שהם זיהו.
• ‫set-cookie-value. הצגת המשאבים עם כותרת Set-Cookie וערך שתואם לערך שצוין. כלי הפיתוח מאכלס את ההשלמה האוטומטית בכל ערכי הקובצים שמצא.
• status-code. יוצגו רק משאבים שקוד הסטטוס שלהם ב-HTTP תואם לקוד שצוין. כלי הפיתוח מאכלס את התפריט הנפתח של ההשלמה האוטומטית בכל קודי הסטטוס שהוא נתקל בהם.
• ‫url. הצגת המשאבים שבהם הערך של url תואם לערך שצוין.

סינון הבקשות לפי סוג

כדי לסנן בקשות לפי סוג המשאב, לוחצים על הלחצנים All,‏ Fetch/XHR,‏ JS,‏ CSS,‏ Img,‏ Media,‏ Font,‏ Doc,‏ WS (WebSocket),‏ Wasm (WebAssembly),‏ Manifest או Other (כל סוג אחר שלא מופיע כאן) בחלונית Network.

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

כדי להציג משאבים מכמה סוגים בו-זמנית, מחזיקים את המקש Command (ב-Mac) או Control (ב-Windows וב-Linux) ואז לוחצים על כמה מסננים של סוגים.

סינון הבקשות לפי זמן

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

הסתרת כתובות URL של נתונים

כתובות URL של נתונים הן קבצים קטנים שמוטמעים במסמכים אחרים. כל בקשה שמופיעה בטבלה Requests ומתחילה ב-data: היא כתובת URL של נתונים.

כדי להסתיר את הבקשות האלה, בסרגל הפעולות Filters (מסננים), בוחרים באפשרות More filters (מסננים נוספים) > check_box Hide data URLs (הסתרת כתובות URL של נתונים).

שורת הסטטוס שבתחתית מציגה את מספר הבקשות שמוצגות מתוך סך כל הבקשות.

הסתרת כתובות URL של תוספים

כדי להתמקד בקוד שאתם כותבים, אתם יכולים לסנן בקשות לא רלוונטיות שנשלחות על ידי תוספים שאולי התקנתם ב-Chrome. כתובות ה-URL של בקשות התוספים מתחילות ב-chrome-extension://.

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

שורת הסטטוס שבתחתית מציגה את מספר הבקשות שמוצגות מתוך סך כל הבקשות.

הצגת בקשות עם קובצי Cookie שחסומים לתשובה בלבד

כדי לסנן את כל הבקשות חוץ מאלה שקובצי ה-Cookie שלהן לתשובה נחסמו מסיבה כלשהי, בסרגל הפעולות Filters (פילטרים), בוחרים באפשרות More filters (פילטרים נוספים) > check_box Blocked response cookies (קובצי Cookie לתשובה שנחסמו).

שורת הסטטוס שבתחתית מציגה את מספר הבקשות שמוצגות מתוך סך כל הבקשות.

כדי לגלות למה קובץ Cookie של תגובה נחסם, בוחרים את הבקשה, פותחים את הכרטיסייה Cookies ומעבירים את העכבר מעל סמל המידע info.

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

הצגת בקשות חסומות בלבד

כדי לסנן את כל הבקשות חוץ מבקשות חסומות, בסרגל הפעולות Filters (מסננים), בוחרים באפשרות More filters (מסננים נוספים) > check_box Blocked requests (בקשות חסומות). כדי לבדוק את זה, אפשר להשתמש בכרטיסייה Network request blocking במגירה.

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

הצגת בקשות של צד שלישי בלבד

כדי לסנן את כל הבקשות חוץ מאלה שהמקור שלהן שונה מהמקור של הדף, בסרגל הפעולות Filters (מסננים), בוחרים באפשרות More filters (מסננים נוספים) > check_box 3rd-party requests (בקשות מצד שלישי).

שורת הסטטוס שבתחתית מציגה את מספר הבקשות שמוצגות מתוך סך כל הבקשות.

מיון בקשות

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

מיון לפי עמודה

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

מיון לפי שלב הפעילות

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

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

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

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

ניתוח בקשות

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

צפייה ביומן הבקשות

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

הטבלה 'בקשות' מציגה את העמודות הבאות כברירת מחדל:

• שם. שם הקובץ של המשאב או מזהה שלו.

• סטטוס. בעמודה הזו יכולים להופיע הערכים הבאים:

  

  • קוד סטטוס HTTP, לדוגמה 200 או 404.
  • ‫CORS error לבקשות שנכשלו בגלל שיתוף משאבים בין מקורות (CORS).
  • (blocked:origin) לבקשות עם כותרות שהוגדרו באופן שגוי. כדי לראות את הערך הזה של הסטטוס, מעבירים את העכבר מעליו ומוצג תיאור קצר עם רמז לגבי הבעיה.
  • (failed) ואחריה הודעת השגיאה.

• סוג. סוג ה-MIME של המשאב המבוקש.

• היוזם. האובייקטים או התהליכים הבאים יכולים ליזום בקשות:

  • Parser. כלי לניתוח HTML ב-Chrome.
  • הפניה לכתובת אחרת. הפניה אוטומטית מסוג HTTP.
  • סקריפט. פונקציית JavaScript.
  • אחר. תהליך או פעולה אחרים, כמו מעבר לדף באמצעות קישור או הזנת כתובת URL בשורת הכתובת.

• מידה. הגודל המשולב של כותרות התגובה וגוף התגובה, כפי שהם מועברים מהשרת.

• זמן. המשך הכולל, מתחילת הבקשה ועד לקבלת הבייט האחרון בתשובה.

• תרשים מפל מים. פירוט חזותי של הפעילות בכל בקשה.

הוסף או הסר עמודות

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

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

הוספת עמודות בהתאמה אישית

כדי להוסיף עמודה בהתאמה אישית לטבלה Requests:

1. לוחצים לחיצה ימנית על הכותרת של הטבלה Requests (בקשות) ובוחרים באפשרות Response Headers (כותרות תגובה) > Manage Header Columns (ניהול עמודות כותרת).
2. בתיבת הדו-שיח, לוחצים על Add custom header (הוספת כותרת בהתאמה אישית), מזינים את השם שלה ולוחצים על Add (הוספה).

בקשות קבוצתיות לפי מסגרות מוטבעות

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

כדי לקבץ בקשות לפי iframe, פותחים את ההגדרות בחלונית Network ומסמנים את התיבה check_box Group by frame.

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

הצגת התזמון של הבקשות ביחס זו לזו

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

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

ניתוח ההודעות של חיבור WebSocket

כדי לראות את ההודעות של חיבור WebSocket:

1. בעמודה Name בטבלה Requests, לוחצים על כתובת ה-URL של חיבור ה-WebSocket.
2. לוחצים על הכרטיסייה הודעות. בטבלה מוצגות 100 ההודעות האחרונות.

כדי לרענן את הטבלה, לוחצים שוב על השם של חיבור ה-WebSocket בעמודה Name (שם) בטבלה Requests (בקשות).

הטבלה מכילה שלוש עמודות:

• נתונים. המטען הייעודי (payload) של ההודעה. אם ההודעה היא טקסט פשוט, היא מוצגת כאן. בעמודה הזו מוצגים השם והקוד של אופקודים בינאריים. האופקודים הבאים נתמכים: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame, and Pong Frame.
• אורך. אורך ההודעה, בבייטים.
• זמן. השעה שבה ההודעה התקבלה או נשלחה.

ההודעות מקודדות בצבעים לפי הסוג שלהן:

• הודעות טקסט יוצאות הן בצבע ירוק בהיר.
• הודעות טקסט נכנסות מופיעות בצבע לבן.
• אופקודים של WebSocket הם צהובים בהירים.
• השגיאות מופיעות באדום בהיר.

ניתוח אירועים בזרם

כדי לראות את האירועים שהשרתים מעבירים בסטרימינג דרך Fetch API,‏ EventSource API ו-XHR:

1. הקלטת בקשות רשת בדף שבו מתבצע סטרימינג של אירועים.
2. בכרטיסייה Network (רשת), בוחרים בקשה ופותחים את הכרטיסייה EventStream (זרם אירועים).

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

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

צפייה בתצוגה מקדימה של גוף התגובה

כדי לראות תצוגה מקדימה של גוף התשובה:

1. לוחצים על כתובת ה-URL של הבקשה בעמודה Name בטבלה Requests.
2. לוחצים על הכרטיסייה תצוגה מקדימה.

הכרטיסייה הזו שימושית בעיקר לצפייה בתמונות.

הצגת גוף התשובה

כדי לראות את גוף התשובה לבקשה:

1. לוחצים על כתובת ה-URL של הבקשה בעמודה Name בטבלה Requests.
2. לוחצים על הכרטיסייה תשובה.

הצגת כותרות HTTP

כדי לראות את נתוני כותרת ה-HTTP של בקשה:

1. לוחצים על בקשה בטבלה בקשות.
2. פותחים את הכרטיסייה Headers וגוללים למטה לקטעים General,‏ Response Headers,‏ Request Headers וגם Early Hints Headers (אם יש).

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

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

הצגת המקור של כותרת HTTP

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

1. פותחים את הכרטיסייה כותרות של הבקשה שרוצים לבדוק. אפשר לעיין במאמר בנושא הצגת כותרות HTTP.
2. לוחצים על view source (הצגת המקור) ליד הקטע Request Header (כותרת הבקשה) או Response Header (כותרת התגובה).

אזהרה לגבי כותרות זמניות

לפעמים בכרטיסייה כותרות מוצגת הודעת האזהרה Provisional headers are shown.... יכולות להיות לכך כמה סיבות:

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

• משאב הרשת לא תקין. לדוגמה, מריצים את הפקודה fetch("https://jec.fish.com/unknown-url/") במסוף.

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

הצגת מטען ייעודי (payload) של בקשה

כדי לראות את המטען הייעודי (payload) של הבקשה, כלומר את הפרמטרים של מחרוזת השאילתה ואת נתוני הטופס, בוחרים בקשה מהטבלה Requests (בקשות) ופותחים את הכרטיסייה Payload (מטען ייעודי).

צפייה במקור של מטען ייעודי (payload)

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

כדי לראות את המקורות של הפרמטרים של מחרוזת השאילתה ונתוני הטופס, בכרטיסייה מטען ייעודי (payload) לוחצים על view source (הצגת המקור) לצד הקטעים Query String Parameters (פרמטרים של מחרוזת שאילתה) או Form Data (נתוני טופס).

הצגת ארגומנטים מפוענחים של פרמטרים של מחרוזת שאילתה

כדי להחליף את הקידוד של כתובות ה-URL של הארגומנטים, בכרטיסייה Payload, לוחצים על view decoded או על view URL-encoded.

צפייה בקובצי Cookie

כדי לראות את קובצי ה-Cookie שנשלחו בכותרת ה-HTTP של בקשה:

1. לוחצים על כתובת ה-URL של הבקשה בעמודה Name בטבלה Requests.
2. לוחצים על הכרטיסייה Cookies (קובצי Cookie).

תיאור של כל אחת מהעמודות מופיע בקטע שדות.

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

איך רואים את פירוט התזמון של בקשה

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

1. לוחצים על כתובת ה-URL של הבקשה בעמודה Name בטבלה Requests.
2. לוחצים על הכרטיסייה תזמון.

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

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

תצוגה מקדימה של פירוט התזמון

כדי לראות תצוגה מקדימה של פירוט התזמון של בקשה, מעבירים את העכבר מעל הרשומה של הבקשה בעמודה Waterfall בטבלה Requests.

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

הסבר על השלבים של חלוקת הזמנים

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

• הוספה לתור. הדפדפן מכניס את הבקשות לתור לפני שהחיבור מתחיל, וגם במקרים הבאים:
  • יש בקשות בעדיפות גבוהה יותר. העדיפות של הבקשה נקבעת לפי גורמים כמו סוג המשאב והמיקום שלו במסמך. מידע נוסף מופיע בקטע בנושא עדיפות משאבים במדריך fetchpriority.
  • כבר יש שישה חיבורי TCP פתוחים למקור הזה, וזהו המספר המקסימלי. (רלוונטי רק ל-HTTP/1.0 ול-HTTP/1.1).
  • הדפדפן מקצה מקום במטמון הדיסק לזמן קצר.
• Stalled (בהמתנה). יכול להיות שהבקשה נתקעה אחרי שהחיבור התחיל, בגלל אחת מהסיבות שמתוארות בקטע הוספה לתור.
• חיפוש DNS. הדפדפן מנסה לפתור את כתובת ה-IP של הבקשה.
• חיבור התחלתי. הדפדפן יוצר חיבור, כולל לחיצות יד של TCP או ניסיונות חוזרים, ומנהל משא ומתן על SSL.
• משא ומתן מול שרת proxy. הדפדפן מנהל משא ומתן על הבקשה עם שרת proxy.
• הבקשה נשלחה. הבקשה נשלחת.
• הכנה של ServiceWorker. הדפדפן מתחיל להפעיל את ה-Service Worker.
• בקשה ל-ServiceWorker. הבקשה נשלחת אל ה-service worker.
• בהמתנה (TTFB). הדפדפן ממתין לבייט הראשון של התגובה. TTFB הוא ראשי תיבות של Time To First Byte (המהירות שבה מגיע בייט התגובה הראשון). התזמון הזה כולל את זמן האחזור של הלוך ושוב אחד ואת הזמן שלקח לשרת להכין את התגובה.
• הורדת תוכן. הדפדפן מקבל את התגובה, ישירות מהרשת או מ-service worker. הערך הזה הוא סך הזמן שחלף מקבלת התגובה ועד לסיום הקריאה של גוף התגובה. ערכים גדולים מהצפוי יכולים להצביע על רשת איטית, או על כך שהדפדפן עסוק בביצוע עבודות אחרות שגורמות לעיכוב בקריאת התגובה.

הצגת הגורמים המפעילים והתלויות

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

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

צפייה באירועי טעינה

ב-DevTools מוצג התזמון של האירועים DOMContentLoaded ו-load בכמה מקומות בחלונית Network. האירוע DOMContentLoaded צבוע בכחול, והאירוע load צבוע באדום.

הצגת המספר הכולל של הבקשות

המספר הכולל של הבקשות מופיע בשורת הסטטוס בתחתית החלונית Network.

הצגת הגודל הכולל של המשאבים שהועברו ונטענו

בסרגל הסטטוס בתחתית החלונית Network ב-DevTools מופיע הגודל הכולל של המשאבים שהועברו ונטענו (לא דחוסים).

במאמר צפייה בגודל הלא דחוס של משאב מוסבר איך לראות את הגודל של משאבים אחרי שהדפדפן מבטל את הדחיסה שלהם.

הצגת דוח הקריסות שגרם לבקשה

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

צפייה בגודל הלא דחוס של משאב

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

בדוגמה הזו, הגודל הדחוס של מסמך www.google.com שנשלח ברשת היה 43.8 KB, ואילו הגודל הלא דחוס היה 136 KB.

ייצוא נתונים של בקשות

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

שמירת כל בקשות הרשת בקובץ HAR

‫HAR (HTTP Archive) הוא פורמט קובץ שמשמש כמה כלים להפעלת HTTP לייצוא הנתונים שתועדו. הפורמט הוא אובייקט JSON עם חלוקה מסוימת של שדות.

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

כדי לשמור את כל בקשות הרשת בקובץ HAR, בוחרים באחת משתי הדרכים:

• לוחצים לחיצה ימנית על בקשה כלשהי בטבלה Requests (בקשות) ובוחרים באפשרות Copy (העתקה) > Save all [listed] as HAR (sanitized) (שמירת כל [הפריטים שמופיעים] כ-HAR (לאחר הסרת מידע רגיש)) או Save all [listed] as HAR (with sensitive data) (שמירת כל [הפריטים שמופיעים] כ-HAR (עם נתונים רגישים)).

  

• בסרגל הפעולות בחלק העליון של החלונית Network, לוחצים על הורדה Export HAR (sanitized)...‎.

  כדי לייצא עם מידע אישי רגיש, קודם מפעילים את ההגדרות הגדרות > העדפות > רשת > תיבת הסימון אפשר ליצור קובץ HAR עם מידע אישי רגיש, ואז לוחצים על לחצן ההורדה ייצוא ובוחרים באפשרות ייצוא קובץ HAR (עם מידע אישי רגיש) בתפריט הנפתח.

  

אחרי שיש לכם קובץ HAR, אתם יכולים לייבא אותו בחזרה לכלי הפיתוח כדי לנתח אותו בשתי דרכים:

• גוררים ומשחררים את קובץ ה-HAR לטבלה Requests.
• לוחצים על העלאה ייבוא HAR בסרגל הפעולות בחלק העליון של החלונית רשת.

העתקה של בקשה, של קבוצת בקשות מסוננת או של כל הבקשות ללוח

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

כדי להעתיק בקשה בודדת, את התשובה שלה או את מעקב המחסנית:

• העתקת כתובת ה-URL. מעתיקים את כתובת ה-URL של הבקשה ללוח.
• העתקה כ-cURL. מעתיקים את הבקשה כפקודת cURL.
• העתקה כ-PowerShell. מעתיקים את הבקשה כפקודת PowerShell.
• העתקה כאחזור. מעתיקים את הבקשה כקריאת fetch.
• העתקה בתור אחזור (Node.js). מעתיקים את הבקשה כקריאת אחזור של Node.js.
• העתקת התשובה. מעתיקים את גוף התשובה ללוח.
• העתקת דוח הקריסות. מעתיקים את דוח הקריסות של הבקשה ללוח.

כדי להעתיק את כל הבקשות:

• העתקת כל כתובות ה-URL. העתקת כתובות ה-URL של כל הבקשות ללוח.
• העתקת הכול בתור cURL. העתקת כל הבקשות כשרשרת של פקודות cURL.
• העתקת כל הפריטים כ-PowerShell. העתקת כל הבקשות כשרשרת של פקודות PowerShell.
• העתקת כל הפריטים כפריטים שאוחזרו. העתקת כל הבקשות כשרשרת של קריאות לאחזור.
• העתקה של הכול בתור אחזור (Node.js). העתקה של כל הבקשות כשרשרת של קריאות אחזור של Node.js.
• העתקת הכול כ-HAR (לאחר ניקוי). העתקה של כל הבקשות כנתוני HAR ללא מידע אישי רגיש, כמו כותרות Cookie, ‏ Set-Cookie ו-Authorization.
• העתקת הכול כ-HAR (עם מידע אישי רגיש). העתקה של כל הבקשות כנתוני HAR עם מידע אישי רגיש.

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

• העתקת כל כתובות ה-URL שמופיעות ברשימה. העתקה של כתובות ה-URL של כל הבקשות שסוננו ללוח.
• העתקת כל הרשומות כ-cURL. העתקה של כל הבקשות המסוננות כשרשרת של פקודות cURL.
• העתקה של כל הרשומות כ-PowerShell העתקה של כל הבקשות המסוננות כשרשרת של פקודות PowerShell.
• העתקה של כל הרשומות כפריטים שאוחזרו. העתקה של כל הבקשות המסוננות כשרשרת של קריאות לפונקציית fetch.
• העתקה של כל הרשומות כפריטים שאוחזרו (Node.js). העתקה של כל הבקשות המסוננות כשרשרת של קריאות אחזור של Node.js.
• העתקה של כל הרשומות כ-HAR (לאחר ניקוי). העתקה של כל הבקשות המסוננות כנתוני HAR ללא מידע אישי רגיש כמו כותרות Cookie, Set-Cookie ו-Authorization.
• העתקה של כל הרשומות כ-HAR (עם מידע אישי רגיש). העתקה של כל הבקשות המסוננות כנתוני HAR עם מידע אישי רגיש.

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

כדי להתמקד במה שחשוב לכם, אתם יכולים להרחיב או לכווץ קטעים בממשק המשתמש של החלונית Network.

הסתרת סרגל הפעולות של המסננים

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

שימוש בשורות בקשה גדולות

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

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

הסתרת הטראק 'סקירה כללית'

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