Network Monitor לוכד ומציג כל בקשת רשת שהדף הנוכחי מבצע — קריאות XHR/Fetch API, טעינת סקריפטים, קבצי CSS, הורדת תמונות, קבצי גופן ועוד. ראה URLs, שיטות HTTP, קודי סטטוס, גדלי תגובות ותזמון — הכול בפאנל צף שמתעדכן בזמן אמת, ללא צורך לפתוח את DevTools של הדפדפן.
לשונית Network ב-Chrome DevTools עוצמתית אך כבדה — היא תופסת שטח מסך רב, מתאפסת בעת ניווט ומצריכה מעבר מתוכן הדף. Network Monitor מספק את יכולות ניטור הרשת החיוניות בפאנל צף קל-משקל המרחף מעל הדף. הוא מיירט בקשות XHR ו-Fetch ומנטר טעינת משאבים דרך Performance API, ומציג כל בקשת רשת ברגע שהיא מתרחשת. כל בקשה מציגה את ה-URL, שיטת HTTP (GET, POST, PUT, DELETE), קוד סטטוס (בקידוד צבע: ירוק ל-2xx, צהוב ל-3xx, אדום ל-4xx/5xx), גודל התגובה בבייטים ומשך הזמן במילישניות. לחץ על כל בקשה כדי להרחיב את פרטיה: כותרות הבקשה, כותרות התגובה, נתוני הבקשה (ל-POST/PUT), תצוגה מקדימה של גוף התגובה ופירוט תזמון. סנן לפי סוג (XHR/Fetch, JS, CSS, Images, Fonts) כדי להתמקד בתעבורה ספציפית.
כל בקשת רשת מופיעה בפאנל ברגע שהיא מתרחשת — טעינות דף, קריאות API, משאבים שנטענים בדחייה ובקשות ברקע. הפיד מתעדכן בזמן אמת ללא צורך ברענון ידני.
לחץ על כל בקשה לצפייה בפרטים מלאים: URL הבקשה, שיטה, כותרות, נתונים (ל-POST/PUT), כותרות תגובה, תצוגה מקדימה של גוף התגובה (JSON בפורמט אוטומטי), קוד סטטוס, גודל ופירוט תזמון.
סנן בקשות לפי סוג: XHR/Fetch (קריאות API), JS (סקריפטים), CSS (גיליונות סגנון), IMG (תמונות), Font (גופני רשת), או הכול. בדד תעבורת API מטעינת משאבים כדי להתמקד בנחוץ.
קודי סטטוס מקודדים בצבע לזיהוי מיידי: ירוק ל-2xx (הצלחה), צהוב ל-3xx (הפניות), אדום ל-4xx (שגיאות לקוח) ו-5xx (שגיאות שרת). בקשות כושלות גלויות באופן מיידי.
כל בקשה מציגה את גודל התגובה (ב-KB) ואת משך הזמן הכולל (במילישניות). זהה קריאות API איטיות, משאבים גדולים מדי ובקשות מיותרות שפוגעות בביצועי הדף.
סרגל סיכום מציג את מספר הבקשות הכולל והגודל המצטבר של כל הבקשות שנלכדו. סנן את הסיכום לצפייה בסך הכול לפי סוג — כמה רוחב פס מוקדש לסקריפטים לעומת תמונות לעומת קריאות API.
עקוב אחר בקשות XHR/Fetch כדי לוודא שה-frontend קורא לנקודות הקצה הנכונות של ה-API עם הפרמטרים המתאימים. לחץ לבדיקת נתוני הבקשות וגופי התגובות — גלה אי-התאמות בפורמטי נתונים מיד.
ערכים אדומים של 404 ו-500 מדגישים מיד משאבים שבורים או קריאות API כושלות. ראה אילו URLs נכשלים, מתי הם נכשלים ומה תגובת השגיאה שהשרת מחזיר.
מיין לפי משך זמן כדי למצוא את הבקשות האיטיות ביותר. מיין לפי גודל כדי למצוא את המשאבים הגדולים ביותר. סך הסיכום מציג את תמונת רוחב הפס המלאה — האם הדף מבצע יותר מדי בקשות או מוריד יותר מדי נתונים?
ראה אילו בקשות רשת הדף מבצע ברקע — פינגים אנליטיים, קריאות heartbeat, בקשות polling, משאבים שנטענים בדחייה. הבן את פעילות הרשת המלאה מעבר למה שגלוי למשתמש.
סנן בקשות ובדוק אילו דומיינים נוצרים איתם קשרים. זהה סקריפטים של צד שלישי המבצעים קריאות רשת בלתי צפויות — פיקסלים למעקב, איסוף נתונים או קריאות API חיצוניות שלא ידעת עליהן.
פתח את ה-dock הצף של DevSuite Pro ולחץ על סמל Network Monitor. פאנל נפתח ומתחיל ללכוד בקשות רשת מיד.
השתמש בדף כרגיל. כל בקשת רשת מופיעה בפיד ברגע שהיא מתבצעת — קריאות API, טעינות משאבים ובקשות ברקע נלכדות כולן.
לחץ על מסני הסוג (XHR, JS, CSS, IMG, Font) לצמצום התצוגה. הצג רק קריאות API לאיתור באגים בשליפת נתונים, או רק תמונות לבדיקת טעינת נכסים.
לחץ על כל שורת בקשה להרחבת פרטיה: URL, כותרות, נתונים, גוף תגובה, קוד סטטוס, גודל ותזמון.
קודי סטטוס אדומים (404, 500) מעידים על בקשות כושלות. משכי זמן ארוכים מסמנים צווארי בקבוק בביצועים. גדלים גדולים מרמזים על משאבים הזקוקים לאופטימיזציה.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
