וובמאסטר - תיכנות ובניית אתרים

מדריך Internet Explorer 9 למפתחים - Network

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 18 מרץ, 2011
F+
F-

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

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

אחרי שניכנס לדף, נפתח את כלי המפתחים של אינטרנט אקספלורר 9 ונכנס אל לשונית Network:

לשונית נטוורק

נגלול מעט למטה את העמוד ונגיע אל הדוגמא הראשונה - משלוח טקסט וקבלתו, נלחץ על Start Capturing:

Start Capturing

אחרי כן נבצע שליחה של בקשת AJAX:

שליחת בקשת AJAX

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

בקשת AJAX

אנו יכולים לראות לאיזה URL נשלחה הבקשה, מה ה-Method, מה קוד התוצאה (200,304,404 וכו'), איזה סוג מידע אנו מקבלים ומה המשקל וכמה זמן זה לקח לנו.

אם אנו רוצים לבחון את פקטת המידע באופן יותר עמוק, נבחר ב-Go To Detailed View:

פירוט הפקטה

אנו נקבל מבט מפורט על פקטת המידע כולל כל ה-headers שנרצה:

מבט מפורט על פקטת המידע

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

לחיצה על Back To Summary View תחזיר אותנו לתקציר כל הבקשות שנשלחו מהעמוד הזה.

 

אנו יכולים להשתמש בכלי ניתוח התעבורה כדי לראות לא רק בקשות AJAX, אלא את כל התנועה מהדפדפן אל האתר. אפשר ללחוץ על Start Capturing ואז לטעון מחדש את הדף או לפתוח דף אחר, בכלי יתגלה כל המידע - מתמונות, CSS וגם עוגיות שהדף מוריד. הנה דוגמא:

דוגמא לסקירה מלאה של דף

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

image

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

רן בר-זיק, אינטרנט ישראל

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.

אינטרנט ישראל: www.internet-israel.com
תגיות: IE9‏  /  מדריך‏  /  פיתוח‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות