כלי הפיתוח לאקספלורר מגיעים כחלק בלתי נפרד מהדפדפן החל מגירסה 8. על מנת להתחיל ולהשתמש בהם כל שעל המפתח לעשות הוא ללחוץ על F12 כאשר האקספלורר פתוח:

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

• טאב Network למעקב אחרי תעבורת רשת.
• טאב Console לאינטרקציה עם המפתח.

ניתוח תעבורת רשת בעזרת טאב Network

טאב ה-Network החדש בדומה לכלי web debugging כמו Fiddler מאפשר למפתחים לעקוב אחרי התעבורה ברשת ולקבל ניתוח מעמיק על בקשות לשרת והתשובות המתקבלות מהן. בעזרת ניתור זה המפתחים יכולים לקבל אינפורמציה על שגיאות בתשובות משרתים, קבצים לא קיימים ושגיאות צד שרת. בנוסף ניתן לבצע Debug על בקשות AJAX בגלל שניתן לקבל אינפורמציה על כל בקשה ותשובה מהשרת.

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

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

בתוך הפרטים הנוספים המפתח יכול לסקור את פרטי הבקשה, את הכותרת וגוף התשובה, את ה- Cookies ואת התזמון שלקח לבקשה הנ"ל. בנוסף לכל האינפורמציה ניתן לשמור את הנתונים לקובץ CSV או בפורמט HTTP Archive שניתן לקריאה על ידי כלים כמו Fiddler או שניתן להריץ מול קבצים בפורמט הזה חלק מחוקי YSlow.

ביצוע Debug של ג'אווהסקריפט בעזרת טאב Script

רוב האתרים כיום מפעילים סקריפטים שונים על מנת לתת לחווית משתמש. חלק רב של עבודת מפתח האינטרנט היא בקידוד של הפונקציות בשפות כמו ג’אווהסקריפט על מנת ליצור את החוויה הזו. כלי שמאפשר Debug לסקריפטים הוא כלי הכרחי למפתח ומכאן שטאב ה- Script הוא מהטאבים החשובים של כלי הפיתוח של האקספלורר. על מנת להתחיל לבצע Debug על המפתח להכנס לטאב וללחוץ על כפתור Start debugging:

כאשר שגיאות מתרחשות או כאשר מגיעים ל- Breakpoint יזום ניתן יהיה לבצע Debug session המכיל יכולות שאליהן מורגל המפתח מכלי פיתוח מתקדמים כמו למשל לקבל את הStack Trace או לראות משתנים לוקאליים:

ניתוח ביצועים בעזרת טאב Profiler

טאב ה- Profiler מאפשר למפתח לקחת את הביצועים של קוד הג’אווהסקריפט שהוא רושם לרמה גבוהה יותר בתחום הביצועים. ה- Profiler מחצין מידע רב בנוגע לביצועים ובעיקר את משך הזמן שהקוד רץ בפונקציות שהמפתח בנה ואפילו משך הזמן שלקח לפונקציות שהן מובנות בתוך הג’אווהסקריפט לרוץ. על מנת להפעיל את ה- Profiler יש להכנס לטאב וללחוץ על כפתור Start profiling:

לאחר הלחיצה על הכפתור ניתן להמשיך ולעבוד כרגיל על הדף. כאשר המפתח בוחר לעצור את ה- Profiler כל האינפורמציה שנאגרה תוצג למפתח בצורה שמאוד קלה להבנה לפי חתכים של קריאות של פונקציות או Call tree:

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

תחקור אלמנטי DOM עם טאב ה- HTML

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

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

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

ניתוח עיצוב הדף בעזרת טאב CSS

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

דוגמא לאפשריות מעבר מ- CSS אחד לאחר:

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

אינטרקציה עם ג'אווהסקריפט בעזרת טאב Console

בעזרת טאב ה- Console החדש המפתחים יכולים לבצע אינטרקציה מול הדף שעליו הם עובדים ועל ידי כך להפעיל פונקציות ג’אווהסקריפט על מנת לבדוק אותן ולבצע עליהן Debug. אפשרות העבודה עם Console היתה קיימת כחלק מהטאב Script באקספלורר 8 אבל קיבלה טאב משלה באקפלורר 9. ביחד עם טאב הScript המפתח מקבל אופציה של Javascript Debugging יותר נוחה ויותר קלה לתפעול.

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

סיכום

אינטרנט אקספלורר 9 מביא איתו רוחות של שינוי בהרבה מאוד דרכים כאשר אחת מהן היא ההשקעה בכלי הפיתוח עבור מפתחי אינטרנט. התוספות של טאב הConsole אבל בעיקר של טאב ה- Network מאפשרות למפתח לבצע אינטרקציה ולקבל אינפורמציה רבה שתעזור לו לפתח באופן קל יותר ונוח יותר את המערכות האינטרנטיות שעליהן הוא עובד. בנוסף לתוספות הללו קיימות גם תוספות והרחבות נוספות שלא נסקרו כמו לדוגמא האפשרות לשנות User Agent בעזרת כלי ה-Change user agent string או שיפור הממשק מול המשתמש. בסך הכל ככלי למפתחים Internet Explorer 9 Developer Tools הפך לכלי שעומד בשורה הראשונה יחד עם כלים אחרים למפתחים כמו Firebug.