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