כלי הפיתוח של Internet Explorer – חלק 2 – עבודה עם HTML ו- CSS

15 ביולי 2011

כלי הפיתוח של Internet Explorer  לתחקור HTML CSSהפוסט הזה הוא הפוסט השני בסדרת פוסטים בנושא כלי הפיתוח של אינטרנט אקספלורר, שיעזרו לך להבין ולשפר את המבנה, התפקוד והביצועים של האתר שלך.

  • חלק 1 – מבוא
  • חלק 2 – עבודה עם HTML ו- CSS
  • חלק 3 – לדבג סקריפטים ב- JavaScript
  • חלק 4 – לבצע Profiling ל- JavaScript
  • חלק 5 – ביצועים ברשת ואופטימיזציה

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

עבודה עם HTML ו- CSS

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

בחירת אלמנט ע”י קליק

נלחץ על כפתור הבחירה בכלי הפיתוח ie select או נשתמש בקיצור Ctrl + B, ונסמן את האלמנט על הדף אותו אנחנו רוצים לתחקר. האלמנט שסימנו יצבע במסגרת כחולה והוא יוצג בתצוגת ה- HTML של כלי הפיתוח.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

חיפוש ב- HTML

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

בתצוגת ה- HTML, תיבת החיפוש תומכת בסלקטורים של CSS (משמשים גם כסלקטורים ב- jQuery), אך חשוב לזכור להשתמש בסימן @ כדי לבצע חיפוש לפי סלקטורים.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

למשל, אם ביצוע חיפוש של המחרוזת: "@.postOptions a" יביא לחיפוש כל הקישורים שמתחת לתגיות עם class בשם postOptions. התוצאות יסומנו בצבע צהוב בתצוגת ה- HTML.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

סימון אלמנטים ע”ג הדף

כדי שיהיה קל לראות אלמנטים מסויימים בדף, נוכל לסמן אותן דרך תפריט ה- Tools->Outline Elements:

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

נזין את הסלקטור לחיפוש ונבחר את הצבע לסימון

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

האלמנטים העונים לחיפוש יסומנו ע”ג הדף (כתום וירוק):

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

תחקור ה- HTML בדף

אחרי שמצאנו את האלמנטים שחיפשנו, טאב ה- HTML מאפשר לנו לתחקר ולשנות את ה- HTML וכן לשמור את השינויים שביצענו. ניתן לשנות ערכים של attributes וכן להוסיף מאפיינים חדשים ע”י לחיצה על הכפתור הימני ובחירה באפשרות Add Attribute. אפשר גם לערוך את ה- HTML ישירות ע”י שימוש בכפתור ה- Edit ie edit (או שימוש בקיצור Ctrl+E).

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

שינויים שמבוצעים דרך תצוגת ה- HTML משפיעה רק על העותק המקומי שמוצג כרגע ולא משפיע על האתר. כדי לשמור את השינויים שביצעת בקבצי ה- HTML וה- CSS, עליך ללחוץ על כפתור השמירה  ie save ולשמור אותם מקומית. דרך שימושית אחרת לבודד את האלמנט הנוכחי עם הגדרות העיצוב שלו היא ע”י לחיצה על כפתור ה- Element Source with Style ie style(או Ctrl+T). יוצג קוד ה- HTML והגדרות ה- CSS של האלמנט הנוכחי.

אפשר להציג את קוד ה- DOM של הדף כולו או של האלמנט הנבחר מתוך תפריט ה- View->Source.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

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

עבודה עם CSS

כלי הפיתוח של אינטרנט אקספלורר הם כלי עבודה מעולים בכל הקשור לעבודה עם CSS, ועוזרים מהם כדי להבין ולתקן תופעות במהלך עיצוב האתר (“למה הכותרת הזאת לא בצבע אדום??”).

אחרי שסימנת אלמנט HTML כלשהו, האיזור הימני של הכלי הפיתוח מציג את תצוגת Style.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

אפשר לראות את סגנונות העיצוב שמוגדרים על האלמנט הנבחר, ומאילו אלמנטים או Classים הוא מקבל בירושה את סגנונות העיצוב. התצוגה מתחילה מהאלמנט הראשי בדף (במקרה הזה תגית ה- HTML עצמה) ויורדת פנימה לפי עץ האלמנטים עד האלמנט הנוכחי. שימו לב למאפיינים שנראים מחוקים בתצוגה (יש מעליהם קו אופקי) – ערכי מאפיינים אלה נדרסים ע”י אלמנט נמוך יותר בהיררכיה.

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

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

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

כמו בתצוגה Style גם כאן אפשר להדליק ולכבות את המאפיין ע”י לחיצה על ה- Check Box.

תצוגת Layout מציגה בצורה גרפית את האלמנט עם הגודל, ה- Offset, ה- Margin וה- Padding שלו. התצוגה הזאת מאפשרת עריכה, וניתן לשנות את כל המאפיינים האלו מכאן.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

תצוגת Attributes מציגה את כל המאפיינים של האלמנט הנבחר. גם מאפיינים על האלמנט עצמו וגם מאפיינים בתוך התכונה Style. ניתן לערוך את המאפיינים ולהוסיף מאפיינים חדשים עם עזרה של השלמה אוטומטית של מאפיינים.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

טאב ה- CSS

טאב ה- CSS בחלקו השמאלי של כלי הפיתוח, מציג את הגדרות ה- CSS שקיימות בדף, ומאפשר לנו לתמקד בהגדרות של דף CSS ספציפי.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

ניתן לשנות את המאפיינים השונים ישירות מתוך הרשימה, או להוסיף אלמנטים חדשים.

כלי הפיתוח של Internet Explorer  לתחקור HTML CSS

סיכום

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

תהנו!

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

5 תגובות

  1. תומר 16 ביולי 2011 ב 19:26

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

    הגב
  2. איל1 באוגוסט 2011 ב 16:22

    דפדפן חשוב לפתחו ולא להזניח אותו כמו באמריקה

    הגב
  3. ׳איל1 באוגוסט 2011 ב 16:25

    לחדש את xp במתקונת חדשה יפתור הרבה בעיות תקשורת

    הגב
  4. ׳איל1 באוגוסט 2011 ב 16:26

    לחדש את xp במתקונת חדשה יפתור הרבה בעיות תקשורת

    הגב