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

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

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

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

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

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

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

מחיקת הבקשות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. בחזרה לחלונית Network, בוחרים את הפרופיל החדש בתפריט הנפתח Throttling.

   

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

ויסות חיבורי WebSocket

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

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

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

איך לדמות חיבורי רשת איטיים מהתפריט הנפתח 'תנאי הרשת'

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

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

ניקוי ידני של קובצי cookie בדפדפן

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

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

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

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

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

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

בקשות חיפוש

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

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

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

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

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

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

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

סינון בקשות

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

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

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

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

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

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

• cookie-domain. הצגת המשאבים שמגדירים דומיין ספציפי של קובץ cookie.
• cookie-name. הצגת המשאבים שמגדירים שם קובץ cookie ספציפי.
• cookie-path. הצגת המשאבים שמגדירים נתיב ספציפי של קובצי cookie
• cookie-value. הצגת המשאבים שמגדירים ערך ספציפי של קובץ Cookie.
• domain. הצגת משאבים רק מהדומיין שצוין. אפשר להשתמש בתו כללי לחיפוש (*) כדי לכלול מספר דומיינים. לדוגמה, *.com מציג משאבים מכל שמות הדומיינים שמסתיימים ב-.com. תפריט הנפתח של ההשלמה האוטומטית ב-DevTools מאוכלס בכל הדומיינים שנתקלו בהם.
• has-overrides. הצגת בקשות שביטלו את content,headersyesno
• 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. הצגת כותרות גולמיות של קובצי 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) ואז לוחצים על כמה מסנני סוגים.

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

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

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

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

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

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

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

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

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

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

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

מיון הבקשות

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

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

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

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

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

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

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

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

ניתוח הבקשות

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

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

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

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

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

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

  

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

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

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

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

• Size (גודל). הגודל המשולב של כותרות התגובה ושל גוף התגובה, כפי שהם נשלחים מהשרת.

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

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

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

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

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

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

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

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

קיבוץ בקשות לפי מסגרות בקוד

אם מסגרות בתוך שורות בדף יוצרות הרבה בקשות, אפשר לקבץ אותן כדי לשפר את הקריאוּת של יומן הבקשות.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איך רואים תצוגה מקדימה של גוף התשובה

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

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

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

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

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

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

הצגת כותרות HTTP

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

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

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

בקטע Response Headers (כותרות תגובה), אפשר להעביר את העכבר מעל ערך כותרת וללחוץ על הלחצן edit Edit (עריכה) Edit (עריכה) כדי לשנות את כותרת התגובה באופן מקומי.

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

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

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

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

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

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

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

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

הצגת מטען הבקשה

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

הצגת מקור המטען הייעודי (Payload)

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

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

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

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

הצגת קובצי Cookie

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

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

לתיאור של כל אחת מהעמודות, ראו שדות.

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

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

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

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

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

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

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

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

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

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

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

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

הצגה של היוזמים ויחסי התלות

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

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

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

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

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

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

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

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

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

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

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

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

עוברים אל הגדרות > שורות בקשה גדולות, ומעיינים בערך התחתון בעמודה גודל.

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

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

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

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

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

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

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

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

  

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

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

  

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

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

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

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

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

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

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

• העתקת כל כתובות ה-URL. העתקת כתובות ה-URL של כל הבקשות ללוח.
• העתקת הכול כ-cURL. העתקת כל הבקשות כשרשרת של פקודות cURL.
• העתקת כל הפריטים כ-PowerShell. מעתיקים את כל הבקשות כשרשור של פקודות PowerShell.
• העתקת הכול כאחזור. מעתיקים את כל הבקשות כשרשור של קריאות אחזור.
• העתקה של הכול כ-fetch (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 עם מידע אישי רגיש.

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

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

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

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

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

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

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

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

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