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

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

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

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

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

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

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

ניקוי הבקשות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

השבתת מטמון הדפדפן מהחלונית 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.

הגבלת חיבורי 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. בוחרים מהירות חיבור מהתפריט Network throttling (הגבלת רוחב פס).

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

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

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

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

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

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

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

• נתיב. חלק הנתיב בכתובת ה-URL.
• ‫URL. כתובת ה-URL המלאה של הבקשה.
• בקשה #. הסדר המוחלט של התחלת הבקשה.
• Method. ה-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. בתיבת הדו-שיח, לוחצים על 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. בוחרים בקשה בעמודה Name בטבלה Requests.
2. פותחים את הכרטיסייה תצוגה מקדימה.

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

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

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

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

הצגת כותרות HTTP

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

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

בקטע 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) בפורמט קריא.

כדי לראות את המקורות של הפרמטרים של מחרוזת השאילתה ונתוני הטופס, בכרטיסייה מטען ייעודי (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 (המהירות שבה מגיע בייט התגובה הראשון). התזמון הזה כולל 1 הלוך ושוב של חבילות נתונים (latency) ואת הזמן שלקח לשרת להכין את התגובה.
• הורדת תוכן. הדפדפן מקבל את התגובה, ישירות מהרשת או מ-service worker. הערך הזה הוא סך כל הזמן שחלף מקבלת התגובה ועד לסיום הקריאה של גוף התגובה. ערכים גדולים מהצפוי יכולים להצביע על רשת איטית, או על כך שהדפדפן עסוק בביצוע פעולות אחרות שגורמות לעיכוב בקריאת התגובה.

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

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

כשמסדרים את הטבלה 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.
• העתקה כאחזור. מעתיקים את הבקשה כקריאה לאחזור.
• העתקה בתור אחזור (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.
• העתקה של כל הרשומות כ-fetch (Node.js). העתקה של כל הבקשות המסוננות כשרשרת של קריאות אחזור של Node.js.
• העתקה של כל הרשומות כ-HAR (לאחר ניקוי). העתקה של כל הבקשות המסוננות כנתוני HAR ללא מידע אישי רגיש כמו כותרות Cookie, Set-Cookie ו-Authorization.
• העתקה של כל הרשומות כ-HAR (עם מידע אישי רגיש). העתקה של כל הבקשות המסוננות כנתוני HAR עם מידע אישי רגיש.

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

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

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

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

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

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

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

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

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