מדריך Internet Explorer 9 למפתחים – תחקור HTML

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

בואו וננסה אותו! נכנס לדף כלשהו (לצורך העניין אינטרנט ישראל) ונלחץ על HTML:

אנו יכולים לגשת לאלמנט מסוים באמצעות נבירה ב-HTML בתחתית הדף – לחיצה על הפלוס הקטן ליד אלמנט ה-html, וכך הלאה, או שאנו יכולים ללחוץ על החץ הקטן:

לאחר הלחיצה, אנו יכולים לבחור אלמנטים! פשוט תיגשו עם החץ אל אלמנט מסוים – למשל כותרת הדף ותלחצו על הלחצן השמאלי:

מיד אנו יכולים לראות את האלמנט שבחרנו אותו עם החץ בהיררכית ה-HTML וכן תוצג מסביבו מסגרת כחולה שמציגה אותו.

אנו יכולים לבחון ולשנות את ה-CSS של האלמנט בקלות מדהימה – שימו לב לחלקו הימני של החלון (ה-Style) :

כל מה שקשור לעיצוב של האלמנט מוצג פה – כאשר ההיררכיה היא מלמטה למעלה. למטה מוצגים כל ה-classים הספציפיים יותר (ולפיכך הקובעים יותר) ולמעלה מוצגים ה-classים הכלליים יותר. אחד הדברים שתשימו לב אליהם מיד הם אותם עיצובים שמחוקים בקו חוצה. אלו הם css styles שנעשה להם override על ידי class יותר גבוה בהיררכיה. למשל:

אנו יכולים לראות שההגדרה של צבע קישור שהוגדרה ב-CSS לקישור, נדרסה על ידי ההגדרה היותר ספציפית (קישור שנמצא בתוך אלמנט H1 שנמצא בתוך אלמנט עם id של header-bg).

ליד כל תכונה יש סימן של V, אם נסיר את הסימן, אנו נבטל את התכונה והתכונה הבאה בתור תוצג. כך למשל, אם אבטל את תכונת צבע הקישור, אני אוכל לראות שצבע הקישור של אותו אלמנט משתנה בהתאם לתכונה הבאה שמקבלת מייד V:

אם נקליד פעמיים על התכונה עצמה, נוכל לשנות אותה! כך למשל אני יכול להקליק על תכונת הצבע ולשנות אותה לירוק:

לחיצה על Trace Styles מציגה את הסגנונות של האלמנט שנבחר בצורה שונה במקצת (פחות נוחה לטעמי):

לחיצה על Layout מציגה את הרוחב, האורך, השוליים וה-padding של האלמנט שנבחר באופן נוח ונעים:

ניתן ללחוץ על כל ערך ולשנות את הגודל שלו לפי רצוננו.

השימוש ב-Attributes מאפשר לנו לראות את תכונות ה-inline של האלמנט ולהוסיף תכונות משלנו. על מנת להוסיף תכונה מסוימת, עלינו ללחוץ על סימן הפלוס הירוק ולכתוב את התכונה והערך שלה:

יש auto complete וקל ביותר להכניס וגם למחוק את התכונות.

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

כאשר אנו יכולים לבחור לשמור את ה-HTML ולשמור את ה-CSS.