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

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

תיעוד בקשות רשת

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

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

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

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

מחיקת הבקשות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

כדי לצפות בויסות נתונים (throttle) של WebSocket:

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

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

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

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

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

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

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

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

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

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

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

בקשות חיפוש

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

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

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

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

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

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

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

סינון הבקשות

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

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

אם אינך רואה את התיבה, סביר להניח שהחלונית Filters (מסננים) מוסתרת. ראו הסתרת החלונית Filters.

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

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

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

• cookie-domain הצגת המשאבים שמגדירים דומיין ספציפי של קובצי Cookie
• cookie-name הצגת המשאבים שמגדירים שם קובץ Cookie ספציפי.
• cookie-path הצגת המשאבים שמגדירים נתיב ספציפי של קובצי cookie
• cookie-value הצגת המשאבים שהגדירו ערך ספציפי של קובץ cookie.
• domain הצגת משאבים רק מהדומיין שצוין. אפשר להשתמש בתו כללי לחיפוש (*) כדי לכלול מספר דומיינים. לדוגמה, ב-*.com מוצגים משאבים מכל שמות הדומיינים שמסתיימים בסיומת ב-.com. בכלי הפיתוח מוצג תפריט נפתח של ההשלמה האוטומטית, שכולל את כל הדומיינים נתקלנו ב-Google.
• has-overrides הצגת בקשות שביטלו את content, headers, את כל השינויים מברירת המחדל (yes) או לא בוטלה (no). אפשר להוסיף לטבלת הבקשות את העמודה כולל שינויים המתאימה.
• has-response-header הצגת המשאבים שכוללים את כותרת תגובת ה-HTTP שצוינה. כלי הפיתוח מאכלסים את התפריט הנפתח של ההשלמה האוטומטית בכל כותרות התגובות המערכת נתקלה בבעיה.
• is בעזרת is:running אפשר למצוא מקורות מידע לגבי WebSocket.
• larger-than הצגת משאבים בבייטים שגדולים מהגודל שצוין. הגדרת ערך של 1000 שוות ערך להגדרת הערך של 1k.
• method הצגת משאבים שאוחזרו באמצעות סוג 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 שלהם תואם לקוד שצוין. DevTools מאכלס את התפריט הנפתח של ההשלמה האוטומטית בכל קודי המצב שזוהו.
• url הצגת המשאבים שיש להם url שתואם לערך שצוין.

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

כדי לסנן בקשות לפי סוג הבקשה, לוחצים על האפשרויות הכול, אחזור/XHR, JS, CSS, Img, מדיה. גופן, Doc, WS (WebSocket), Wasm (WebAssembly), מניפסט או אחר (כל סוג אחר שלא מופיע כאן) בחלונית רשת.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בקשות מיון

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

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

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

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

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

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

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

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

ניתוח בקשות

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

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כדי לקבץ בקשות לפי iframes, פותחים את Settings (הגדרות) בחלונית Network ומסמנים את האפשרות Group by.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת כותרות HTTP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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