מדריך Internet Explorer 9 למפתחים – כלי הפיתוח

‏ • Internet Israel

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

כלי המפתחים של אינטרנט אקספלורר 9

כלי הולידציה

כלי ה-Validate מאפשר ולידציה של הדף לפי מגוון תקנים חשובים. התקן החשוב ביותר הוא תקן ה-W3C כאשר ניתן לבדוק הן את ה-HTML והן את ה-CSS. ישנם עוד קתנים כמו למשל בדיקה של העמוד לפי תקינה 508 – תקינת נגישות שבודקת עד כמה האתר נגיש לבעלי מוגבלויות. מדובר בתקינה חשובה לא רק מההיבט החברתי. אתר נגיש הוא גם אתר טוב יותר מבחינת מנועי החיפוש, מבחינת המשתמשים הרגילים ובדרך כלל הוא אתר שנעים יותר לגלוש בו. בנוסף יש גם בדיקת קישורים (אם כל הקישורים שנמצאים בדף תקינים).

אם אנו רוצים לבצע בדיקת ולידציה, אין קל מכך. יש לגלוש לאתר שבו אנו רוצים לבצע את הבדיקה (למשל אינטרנט ישראל). לפתוח את כלי המפתחים, ללחוץ על Validate ואז לבחור את הולידציה.

בדיקת ולידציה

כלי המפתחים מפנה אותנו לולידטור של ה-W3C והתוצאה נמסרת לנו לאחר חישוב קצר:

דוגמא לבדיקת ולידציה

יש לשים לב שבדיקת הולידציה נעשית רק לקבצים שנמצאים על האינטרנט (אחרת לולידטורים השונים לא תהיה אפשרות לגשת אל הדפים). ניתן לבדוק גם קבצי CSS ו-HTML מקומיים בולידטור של ה-W3C.

כלי הפיתוח

כלי הפיתוח

בכלי הפיתוח יש לנו אוסף של כלים שימושיים במיוחד. כלי ה-Resize מאפשר לנו לשנות את הגודל של החלון וכך לראות כיצד הדפדפן נראה בגדלים שונים של מסכים. ניתן לשנות את ה-user agent string – שימושי במיוחד לבדיקת JavaScript. שימו לב ששינוי ה-user agent string לא משנה את התנהגות הדפדפן.
show ruler מראה לנו סרגל שבאמצעותו אנו יכולים למדוד את רוחב וגובה האלמנטים השונים:

ie9 ruler

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

color picker

הכלי האחרון מאפשר לנו להכניס css selectors ולגרום להם להיות 'מוארים' בדף, למשל – כאן אני מציג את כל האלמנטים של h1:

outline elements

ניהול cache

cache

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

ניהול תמונות

ניהול תמונות בכלי המפתחים

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

image

ניהול אלמנטים

image

הכלי האולטרא שימושי הזה מאפשר לנו לראות דברים שמאפיינים אלמנטים שונים – כגון class של כל האלמנטים, או ה-URL של הקישורים. הנה דוגמא לתצוגה של ה-classים השונים של האלמנטים שלי:

class

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

 

כלי Disable

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

image

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

תגיות: , ,

רן בר-זיק

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.אינטרנט ישראל: www.internet-israel.com

תגובות בפייסבוק