מבוא לכלי הפיתוח של 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 וכו’
  • שינוי הרזולוציה וגודל הדף, מדידת גדלי אלמנטים ועוד
  • ואלידציה של הדף

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

מקורות נוספים

תהנו!

כתבה זו פורסמה במקור בבלוג ה-MSDN של מיקרוסופט ישראל

גיא בורשטיין

מומחה טכנולוגיות פיתוח במיקרוסופט ישראל, אחראי על הקשר עם קהילת הפתחים בארץ ובימים אלו מוביל את פעילות פיתוח האפליקציות ל- Windows 8

הגב

6 תגובות על "מבוא לכלי הפיתוח של Internet Explorer 9 / מדריך – חלק ראשון"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
איל
Guest

כלי נחות בהשוואה ל-Firebug או לזה של webkit (chrome) עם ה-GUI המעצבן, אבל לפעמים אין ברירה וצריך להשתמש בו.. תודה על הכתבה.

ר
Guest

IE9

הבחירה הטבעית של כל מפתח :)

need4steer
Guest

תודה רבה על הכתבה המושקעת!.

דויד
Guest

אני לא מבין מה הטעם להתחיל לפתח ל9 כש10 כבר מעבר לפינה

גיא בורשטיין
Guest

@דויד – כלי הפיתוח של אקספלורר 10 נכון להיום זהים לשל אקספלורר 9. במידה ויהיו שינויים, הרי שאלו יהיו תוספות וצריך להתחיל מהבסיס.

דויד
Guest

גיא טוב שציינת נכון להיום…
נכון להיום גם Silver Light עדיין קיים…
אבל כולם כבר יודעים שהוא ממש לא ומיקרוסופט הולכת ל HTML 5
חבל על כל אותן חברות שנפלו בפח והחלו לפתח בו
כך שנראה לי עדיין עדיף לראות מה הולך להיות ב 10 ולהתחיל איתו
אבל זה נתון לשיקול דעתו של כל אחד
מספיק להזכיר את WPF ו ASP.net בכדי להבין שלמיקרוסופט אין בעיה לזנוח טכנולוגיות לטובת אחרות ומצידה שכולם ימשיכו להתאים את עצמם אליה

wpDiscuz

תגיות לכתבה: