מבוא לכלי הפיתוח של Internet Explorer 9 / מדריך – חלק ראשון
סדרת פוסטים חדשה, על כלי הפיתוח של IE9, שיעזרו לכם לשפר עיצוב, לדבג סקריפטים, ועוד.
סדרת הפוסטים הזאת נסקור לעומק את כלי הפיתוח שמגיעים כחלק מאינטרנט אקספלורר 9, בהם אפשר להשתמש כדי לחקור את מבנה הדפים, לשפר את העיצוב, לדבג סקריפטים, לבצע אופטימיזציה של הנעשה ברשת ועוד.
- חלק 1 – מבוא
- חלק 2 – עבודה עם HTML ו- CSS
- חלק 3 – לדבג סקריפטים ב- JavaScript
- חלק 4 – לבצע Profiling ל- JavaScript
- חלק 5 – ביצועים ברשת ואופטימיזציה
איך מתחילים?
כלי הפיתוח של אינטרנט אקספלורר מגיעים כחלק מהתקנת הדפדפן (לא נדרשת התקנה נוספת כדי להתחיל להשתמש בהם). כדי להנות מכלי הפיתוח האחרונים יש להריץ את אינטרנט אקספלורר 9 או גירסה מוקדמת למפתחים של אינטרנט אקספלורר 10.
אפשר להוריד את הגירסאות האחרונות של אינטרנט אקספלורר מהאתרים הבאים:
IE Test Drive – הורדת אקספלורר 9 ו- אקספלורר 10, דמויים, מבחנים ומקורות נוספים
Beauty of the Web – לימוד על פיצ’רים חדשים של הדפדפן, דוגמאות אתרי showcase ועוד
הפעלת כלי הפיתוח
פשוט מאד – לחצו F12 כשאתם גולשים בדפדפן או בחרו מתפריט Tools –> F12 Developer Tools.
כלי הפיתוח יוצגו בתחתית חלון הדפדפן:
אפשר גם לקבוע שכלי הפיתוח לא יוצגו בתחתית המסך אלא יופיעו בחלון נפרד, כדי להציג חלון לצד חלון או במסך נפרד. כדי לשנות את הדרך שבה כלי הפיתוח מוצגים נלחץ על הכפתורים הבאים שנמצאים בחלק העליון של כלי הפיתוח.
הכירות ראשונית עם כלי הפיתוח
בואו נכיר את התכונות המרכזיות בכלי הפיתוח, אליהם נצלול לעומק בפרקים הבאים. ישנם 6 טאבים מרכזיים של יכולות בכלי הפיתוח: HTML, CSS, Console, Script, Profiler ו- Network.
טאב ה- HTML
טאב ה- HTML הוא המקום בו נחקור את מבנה הדף ונשנה תכונות של אלמנטים ב- DOM.
בחלק שמאלי אנחנו רואים את היררכית האלמנטים בדף ה- HTML, ובחלק השמאלי – עבור האלמנט שנבחר אנחנו רואים את המימדים שלו ע”פ תכונות ה- CSS שמוגדרות לו.
טאב ה- CSS
טאב ה- CSS מציג עבור אלמנט נבחר את הגדרות העיצוב שלו, בין אם מתוך הגדרות פרטניות לאלמנט או בין אם הגדרות שהתקבלו בירושה מאלמנט אב. ניתן לראות באילו קבצי css נעשה שימוש, לבצע חיפוש בהם ולשנות את ההגדרות האלה ולהשפיע על מראה הדף.
טאב ה- Script וה- Console
טאב ה- Script מאפשר לעבוד עם סקריפטים ב- JavaScript, לשים break-points, לדבג קוד ולעצור ריצה כשיש שגיאות.
בחלק הימני מוצג ה- Console אליו ניתן לכתוב הודעות בזמן ריצת הסקריפט, ניתן לעקוב אחרי משתנים ב- watch, לראות את ה- Call Stack בכל רגע ועוד.
באקספלורר 9 ניתן להציג בצורה מסודרת גם קבצי JavaScript מוקטנים (minified) ולהתמצא בהם כאילו היו קבצים בגודל מלא.
טאב ה- Console מציג את אותו Console מטאב ה- JavaScript, רק עם יותר שטח מסך שמוקדש לאינטראקציה עם האלמנטים או הסקריפט.
טאב ה- Profiler
טאב ה- Profiler מאפשר לך לנתח ריצה של JavaScript. פשוט לחצו “Start Profiling”, הריצו דף כלשהו המכיל סקריפט ולסיום לחצו “Stop Profiling”.
לאחר הריצה יוצג סיכום המכיל את רשימת הפונקציות, זמני הריצה שלהן, כמה פעמים נקראו ועוד.
טאב ה- Network
טאב ה- Network מאפשר לנתח את הגישות והשימוש ברשת בעת עבודה עם הדף.
כמו ב- Profiling של סקריפט, נלחץ על “Start Capturing” כדי להתחיל לעקוב אחרי הנעשה ברשת – הבקשות שנשלחות לשרת עם פרטים נוספים עליהן, התשובות שחוזרות, זמני הביצוע ועוד.
לחיצה כפולה על שורה תציג פרטים נוספים על הבקשה / תשובה:
בפרקים הבאים נצלול לעומק הפרטים שרואים כאן ותובנות שניתן להסיק.
שורת התפריטים
בכלי הפיתוח יש מגוון אפשרויות ופעולות שניתן לבצע אותן שלא מופיעים ב- 6 הטאבים המרכזיים וניתן להגיע אליהם מהתפריט העליון:
דוחות על קישורים ותמונות- סימון אלמנטים (טבלאות, DIVים וכו’)
- ניהול ה- Cache
- הגדרת מחרוזות User Agent לבדיקות (למשל, כדי לדמות דפדפן סלולרי)
- חסימת סקריפטים, CSS וכו’
- שינוי הרזולוציה וגודל הדף, מדידת גדלי אלמנטים ועוד
- ואלידציה של הדף
בפרקים הבאים נצלול לעומק הטאבים ומגוון האפשרויות בכלי הפיתוח.
מקורות נוספים
- IE Developer Center – דף הבית לכל המידע למפתחים בנושא אינטרנט אקספלורר.
- רשימת קיצורי מקלדת לכלי הפיתוח של אינטרנט אקספלורר.
תהנו!
כתבה זו פורסמה במקור בבלוג ה-MSDN של מיקרוסופט ישראל
גיא בורשטיין
מומחה טכנולוגיות פיתוח במיקרוסופט ישראל, אחראי על הקשר עם קהילת הפתחים בארץ ובימים אלו מוביל את פעילות פיתוח האפליקציות ל- Windows 8
הגב
6 תגובות על "מבוא לכלי הפיתוח של Internet Explorer 9 / מדריך – חלק ראשון"
* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.
כלי נחות בהשוואה ל-Firebug או לזה של webkit (chrome) עם ה-GUI המעצבן, אבל לפעמים אין ברירה וצריך להשתמש בו.. תודה על הכתבה.
IE9
הבחירה הטבעית של כל מפתח :)
תודה רבה על הכתבה המושקעת!.
אני לא מבין מה הטעם להתחיל לפתח ל9 כש10 כבר מעבר לפינה
@דויד – כלי הפיתוח של אקספלורר 10 נכון להיום זהים לשל אקספלורר 9. במידה ויהיו שינויים, הרי שאלו יהיו תוספות וצריך להתחיל מהבסיס.
גיא טוב שציינת נכון להיום…
נכון להיום גם Silver Light עדיין קיים…
אבל כולם כבר יודעים שהוא ממש לא ומיקרוסופט הולכת ל HTML 5
חבל על כל אותן חברות שנפלו בפח והחלו לפתח בו
כך שנראה לי עדיין עדיף לראות מה הולך להיות ב 10 ולהתחיל איתו
אבל זה נתון לשיקול דעתו של כל אחד
מספיק להזכיר את WPF ו ASP.net בכדי להבין שלמיקרוסופט אין בעיה לזנוח טכנולוגיות לטובת אחרות ומצידה שכולם ימשיכו להתאים את עצמם אליה