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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

ניקוי הבקשות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אם רוצים להשבית את המטמון בזמן שעובדים בחלוניות אחרות של כלי פיתוח, אפשר להשתמש בחלונית הזזה 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 (תנאי הרשת)

אם רוצים לווסת נתונים (throttle) את חיבור הרשת בזמן שעובדים בחלוניות אחרות של כלי פיתוח, משתמשים בחלונית הזזה 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. לוחצים על אחת מתוצאות החיפוש. בחלונית רשת, הבקשה שתואמת לחיפוש מודגשת בצהוב. בנוסף, בחלונית נפתחת הכרטיסייה 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. בכלי פיתוח, התפריט הנפתח להשלמה אוטומטית מאכלס את כל הדומיינים שהכלי נתקל בהם.
• ‫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 בכרטיסיית הבעיות. קובצי Cookie שגויים עם כותרות Set-Cookie שגויות יסומנו בחלונית "רשת".
• ‫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 וערך שתואם לערך שצוין. כלי הפיתוח מאכלס את ההשלמה האוטומטית בכל ערכי הקובצים (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, לוחצים לחיצה ימנית על הכותרת של הטבלה Requests (בקשות), מעבירים את העכבר מעל 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 (בקשות).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת כותרות HTTP

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

1. בוחרים בקשה בעמודה Name בטבלה Requests.
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) לוחצים על הצגת המקור לצד הקטעים פרמטרים של מחרוזת השאילתה או נתוני הטופס.

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

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

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

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

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

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

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

צפייה בסשנים שמוגבלים למכשירים

בכרטיסייה Device bound sessions (סשנים שקשורים למכשיר) מוצגים פרטי הדחייה (רענון) שמשויכים לבקשה שנבחרה עבור כל הסשנים הפעילים שקשורים למכשיר באתר.

כדי לראות את פרטי הדחייה (רענון):

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

הכרטיסייה Device bound sessions מוצגת רק לבקשות רלוונטיות עם קובצי Cookie. בכרטיסייה מפורטים כל הסשנים הפעילים שקשורים למכשיר, ומופיע בהם מידע על דחיית הבקשה (ואם לא, למה). אפשרויות הדחייה האפשריות הן:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

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

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

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

הערה: בחלונית Network מוצגים initiators לבקשות שיובאו מקובצי 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. כדי להסתיר אותו, לוחצים על filter_alt סינון.

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

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

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

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

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