IE9 Developer Tools – מה חדש למפתחים
אינטרנט אקספלורר 9, הגרסה החדשה לדפדפן הנפוץ מבית מיקרוסופט, עבר מתיחת פנים גדולה הן בביצועים שלו, הן בתמיכה בנושאים שונים כמו תאימות לתקנים כמו CSS3, HTML5 והן בממשק שלו למשתמש. גם כלי הפיתוח עבור המפתחים עברו שינויים המעמידים אותם בשורה הראשונה של כלים לצד פתרונות שימושיים ונפוצים. גיל פינק סוקר את היכולות החדשות שקיימות בכלי הפיתוח של אינטרנט אקספלורר 9
Internet Explorer Developer Toolbar
כלי הפיתוח לאקספלורר מגיעים כחלק בלתי נפרד מהדפדפן החל מגירסה 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.
גיל פינק
יועץ בכיר והמנכ"ל של חברת sparXys. ביצע בעבר תפקידי פיתוח כמתכנת בכיר, כראש צוות, כמנהל פיתוח וכיועץ בכיר. בעל תואר Microsoft MVP ובעל הסמכת MCPD. אוהב לחקור וללמוד טכנולוגיות חדשות בעיקר בתחומי עיצוב ופיתוח מערכות ווביות.
הגב
5 תגובות על "IE9 Developer Tools – מה חדש למפתחים"
* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.
אני מקווה שהכלי הזה לא יהיה מבוגג כמו זה שנמצא באינטרנט אקספלורר 8 או 7 שעל “מעלותיו” אפשר למנות את:
1. מדי פעם לא נפתח או מפסיק לעבוד באופן רנדומלי.
2. שינוי של תכונה X באמצעות הכלי לאו דווקא תקפה אם עושים אותה ב-CSS.
3. חוסר בחירה באלמנטים.
לפי מה שאני הבנתי והתנסיתי, השינויים שנעשו הם בעיקר קוסמטיים.
הי רן,
תודה על התגובה.
יש שיפורים בכלי והם בהחלט לט רק קוסמטיים.
ציינתי במאמר את היכולת לבחור אלמנטים ב- Html ולקבל אינדיקציה בכלי.
לגבי שינויי CSS, הם אכן מתרחשים on the fly כאשר אתה משנה משהו בכלי ואני אומר את זה מניסיון לאחר שימוש בכלי.
לגבי זה שהוא לא נפתח או מפסיק לעבוד באופן רנדומלי, עדיין לא קרה לי בשימוש בכלים של IE9 (וכן קרה לי בגרסאות קודמות) כך שאני לא יכול לחוות דעה בנושא.
אני מאד מקוה שזה נכון :-)
בכל מקרה, הסקירה עצמה היתה מקיפה ומעניינת מאד. אני בספק אם איכותו של הכלי משתווה לפיירבאג, דרגונפליי או אפילו כלי הפיתוח של כרום. אבל נצטרך לחכות ולראות…
לדעתי דווקא הוא מנצח את הכלי של כרום ואפילו פיירבאג (אבל זה רק משום שלא הצלחתי להפעיל אותו כמו שצריך…) הכלי מאד מאד נוח, מאפשר לך לעשות עריכות ל HTML ולראות את השינוי מיד, לעבוד עם JS בצורה נוחה ביותר, וגם להשתמש בכל האופציות של DEBUG איכותי (CALL STACK, WATCHES וכו’).
אתה לא שפוי.
הכלי הזה מקרטע!
אי אפשר לערוך באמת את הHTML. והאפשרות לצפייה ב CSS של האלמנט מגוכחת(אני צריך לנחש מה לערוך) ולא כמו בפיירבאג שהכל שם מקוטלג לפי מחלקות משפיעות + ספסיפיק סטייל.
הכלי איטי מאוד, הפונטים לא קריאים, UI לוקה בחסר, עריכה מרושלת.
ובעיקר הקטע של ה CSS: (שוב) קילטוג מוזר ולא מובן של התצוגה, עריכה לא תקינה(בלייאווט משנים את המספר וזה לא עובד[כי לא הכנסת PX! אבל אצלהם זה מוזן בלי PX! התבלבלתם? גם אנחנו!]), פעם עובד פעם לא.
וכמובן הUI המכוער והלא אינטואטיבי.
בקיצור- הכלי פיתוח של IE8 לוקה בחסר בעבוע, ונראה שהם לא למדו כלום.