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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

מחיקת הבקשות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

יצירת פרופילים של ויסות נתונים בהתאמה אישית

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

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

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

   

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

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

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

כדי לבדוק ויסות נתונים של WebSocket:

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

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

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

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

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

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

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

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

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

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

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

סינון הבקשות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מיון הבקשות

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

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

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

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

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

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

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

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

ניתוח בקשות

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

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

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

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

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

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

  

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

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

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

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

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

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

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

הוספה או הסרה של עמודות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת כותרות HTTP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת קובצי Cookie

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• לוחצים לחיצה ימנית על בקשה כלשהי בטבלה Requests ובוחרים באפשרות Save all as HAR with content (שמירת הכול כ-HAR עם תוכן).
• לוחצים על Export HAR בסרגל הפעולות בחלק העליון של החלונית Network.

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

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

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

הערה: בחלונית רשת מתבצעת קריאה והצגה של יוזמים לבקשות שיובאו מקובצי HAR.

העתקה של בקשה אחת או יותר ללוח

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

• העתקת כתובת ה-URL. מעתיקים את כתובת ה-URL של הבקשה ללוח.
• העתקה כ-cURL. מעתיקים את הבקשה כפקודת cURL.
• העתקה כ-PowerShell מעתיקים את הבקשה כפקודת PowerShell.
• העתקה כאחזור. מעתיקים את הבקשה כשיחת אחזור.

• העתקה כאחזור Node.js. מעתיקים את הבקשה כשיחת אחזור של Node.js.

  ---

• העתקת התשובה. העתקת גוף התשובה ללוח.

  ---

• העתקה של כל כתובות ה-URL. העתקת כתובות ה-URL של כל הבקשות ללוח.

• העתקת הכול כ-cURL. מעתיקים את כל הבקשות כשרשרת של פקודות cURL.

• העתקת הכול כ-PowerShell. העתקת כל הבקשות כשרשרת של פקודות PowerShell.

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

• העתקת הכול בתור אחזור של Node.js. העתקת כל הבקשות כשרשרת של קריאות לאחזור Node.js.

• העתקת הכול כ-HAR. העתקת כל הבקשות כנתוני HAR.

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

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

הסתרת החלונית Filters

כברירת מחדל, הכלי DevTools מציג את החלונית Filters. לחץ על Filter כדי להסתיר אותו.

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

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

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

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

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