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

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

הקלטת בקשות לאחזור מהרשת

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

הפסקת ההקלטה של בקשות לאחזור מהרשת

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

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

מחיקת הבקשות

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

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

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

צילום מסך בזמן טעינת הדף

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

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

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

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

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

עריכה ושליחה מחדש של בקשה

אפשר לערוך ולשלוח מחדש כל בקשה לאחזור מהרשת מהטבלה בקשות:

1. לוחצים לחיצה ימנית על הבקשה ובוחרים באפשרות Edit and resend as fetch (עריכה ושליחה מחדש כ-fetch). כלי הפיתוח פותחים את חלונית ההזזה Console כשהבקשה מאוכלסת כקריאת fetch(), תוך שמירה על הפרמטרים המקוריים של הבקשה והקשר הביצוע.
2. אם רוצים, עורכים את הקריאה ל-fetch() ב-Console, ואז לוחצים על Enter כדי לשלוח מחדש את הבקשה.

שינוי אופן הטעינה

הדמיה של מבקר לראשונה על ידי השבתת שמירה במטמון הדפדפן

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

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

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

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

ניקוי ידני של המטמון בדפדפן

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

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

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

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

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

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

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

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

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

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

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

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

3. חוזרים לחלונית רשת ובוחרים את הפרופיל החדש מהתפריט הנפתח ויסות נתונים.

   

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

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

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

כדי לבדוק את הגבלת הקצב של WebSocket:

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

אמולציה של חיבורי רשת איטיים מחלונית ההזזה "תנאי הרשת"

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

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

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

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

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

מידע נוסף על שינוי קבצים וכותרות של תגובות HTTP באופן מקומי

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

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

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

בקשות חיפוש

כדי לחפש בכותרות של בקשות, במטענים ייעודיים (payloads) ובתגובות:

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

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

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

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

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

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

סינון בקשות

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

משתמשים בתיבה Filter כדי לסנן בקשות לפי מאפיינים, כמו הדומיין או הגודל של הבקשה, או מזינים מחרוזת טקסט שתואמת לכתובת ה-URL, לדומיין, לשם המארח או ליציאה של הבקשה (לדוגמה, localhost או example.com), כולל בקשות מאותו אתר.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מיון הבקשות

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

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

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

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

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

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

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

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

ניתוח בקשות

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

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

אפשר להוסיף או להסיר את העמודות הנוספות הבאות:

• בקשה מס'. הסדר המוחלט של הפעלת הבקשה, מוצמד למיקום הראשון בטבלה בקשות כברירת מחדל.
• נתיב. החלק של הנתיב בכתובת ה-URL.
• כתובת URL. כתובת ה-URL המלאה של הבקשה.
• שיטה. ה-method של ה-HTTP של הבקשה (לדוגמה, GET, ‏ POST, ‏ PUT, ‏ DELETE).
• פרוטוקול. הפרוטוקול של הבקשה (לדוגמה, h2 ל-HTTP/2,‏ h3 ל-HTTP/3 וכו').
• סכימה. החלק של הסכימה בכתובת ה-URL.
• דומיין. החלק של הדומיין בכתובת ה-URL.
• כתובת מרוחקת. כתובת ה-IP המרוחקת והיציאה של הבקשה.
• מרחב כתובות מרוחק. מרחב הכתובות המרוחק של הבקשה. ‫Public לכתובות IP ציבוריות, Private לכתובות IP פרטיות.
• מרחב הכתובות של המאתחל. מרחב הכתובות של המאתחל של הבקשה. זהה לשלט הרחוק.
• קובצי Cookie. מספר קובצי ה-Cookie בבקשה.
• הגדרת קובצי Cookie. מספר קובצי ה-Cookie בתגובה.
• עדיפות. העדיפות של הבקשה.
• מזהה החיבור. מזהה החיבור של הבקשה בסשן של הלקוח, אם יש כזה.
• כולל שינויים מברירת המחדל. אם הבקשה כוללת ביטולים (כן, לא, תוכן או כותרות).
• קשורה למודעה. נכון או לא נכון?
• טעינה מראש. אם הבקשה נשלחה באמצעות טעינה מראש ספקולטיבית.
• חסימת רינדור. האם הבקשה חוסמת את העיבוד, עלולה לחסום אותו או לא חוסמת אותו.
• Waterfall. פירוט חזותי של הפעילות בכל בקשה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ניתוח אירועים בסטרימינג

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

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

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

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

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

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

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

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

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

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

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

לתגובות בינאריות או דחוסות, בוחרים שיטת פענוח (Base64,‏ Hex או UTF-8) מהתפריט הנפתח בתחתית הכרטיסייה Response.

הצגת כותרות HTTP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת שאילתות ופרמטרים של טפסים בקידוד URL

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

הצגת מטען ייעודי (payload) בינארי ודחוס

במקרה של מטען ייעודי (payload) של בקשה בינארית או דחוסה, בוחרים שיטת פענוח (Base64,‏ Hex או UTF-8) מהתפריט הנפתח בחלק התחתון של הכרטיסייה Payload.

הצגת קובצי Cookie

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הסבר על השלבים בפירוט התזמון

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

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

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

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

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

הצגת אירועי טעינה

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

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

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

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

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

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

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

כשמשפט 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 (עם נתונים רגישים)).

  

• לוחצים על הורדה ייצוא HAR (מנוקה)... בסרגל הפעולות בחלק העליון של החלונית רשת.

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

  

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

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

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

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

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

• העתקת כתובת ה-URL. מעתיקים את כתובת ה-URL של הבקשה ללוח.
• העתקה כ-cURL. מעתיקים את הבקשה כפקודת cURL.
• העתקה כ-PowerShell. מעתיקים את הבקשה כפקודת PowerShell.
• העתקה כ-fetch. מעתיקים את הבקשה כקריאת fetch.
• העתקה בתור fetch‏ (Node.js). מעתיקים את הבקשה כקריאת אחזור של Node.js.
• העתקה בתור רכיב טעינה מראש. מעתיקים את הבקשה כתג HTML ‏<link rel="preload">.
• העתקת התשובה. מעתיקים את גוף התגובה ללוח.
• העתקת דוח הקריסות. מעתיקים את מעקב המחסנית של הבקשה ללוח.

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

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

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

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

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

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

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

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

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

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

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

הסתרת מסלול הסקירה הכללית

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