סקירה קצרה על כלי עזר למפתחים

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

אין מה להכביר במילים על תוספים לפיירפוקס. אני משוכנע (ומקווה) ש 99% מבוני האתרים משתמשים בו לפיתוח, והסיבה היא שני התוספים המעולים: Firebug ו Web Developer.

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

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

אז בואו נכיר את השחקנים האחרים:

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

מזה בערך שנה יש את IE Developer Toolbar. ואין מה להגיד, זה נחמד שמישהו שם עושה צעדים בכיוון. המידע לא מוצג בצורה הכי נוחה אבל יש כמה פיצ’רים נחמדים:

יש גם הרבה מקום לשיפור. התוסף מתנהג קצת כאילו הוא בגרסת בטא: פיצ’רים מסוימים מפילים אצלי את אינטרנט אקספלורר באופן עקבי, הממשק לא נוח וכו’. כמו כן חסרים מספר פיצ’רים משמעותיים כמו Javascript Debugger.

לסיכום ניתן לומר שזה לא כל כך נעים לעבוד עם IE Developer Toolbar, אבל לפעמים זה הכרחי. מה שאפשר להגיד גם על הדפדפן שבשבילו הוא מיועד..

אולי IE8 ישפר קצת את העניין.

זהו סיפור על תוסף חתיך אך מעט טיפש.

נתחיל בכך שהיה מותקן אצלי ספארי בגרסה 3.0.4 לחלונות. השתמשתי בו לעתים קרובות בפיתוח אתרים כדי לבדוק איך דברים נראים אצל אנשים מאושרים (שיש להם mac). לרוב לא היו לי בעיות רציניות, ולאחרונה האתרים שבניתי נראו שם רוב הזמן בדיוק כמו ב FF ו IE.

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

במאמר מוסגר אני חייב לציין שהמנוע שלו כנראה השתנה בצורה משמעותית, כי אתרים שבניתי לאחרונה, שנראו מעולה ב 3.0.4 נראים מעט מוזר בגרסה החדשה. קצת מתסכל אם תשאלו אותי. במיוחד לאור העובדה שהאתרים בנויים ב quirks mode, אותו “סטנדרט” שאמור היה לקפוא בזמן ולספק תמיכה לאחור.

עד כאן המאמר המוסגר.

בגרסה הנוכחית של ספארי יש את ה Web Inspector שיש לאפשר אותו באמצעות כניסה ל Preferences -> Advanced וסימון V ליד “Show Develop Menu”.

ניתן להפעיל אותו מהתפריט או באמצעות בחירה ב “Inspect Element” אחרי הקלקה על הלחצן הימני של העכבר על אלמנט בדף.

הדבר הראשון שקרה כשהפעלתי אותו זה שהחלון של האתר נהיה אפור והופיע חלון אפור נוסף שהוא הוא ה Web Inspector המיוחל.

לא הצלחתי ללחוץ עליו ורק באמצעות שימוש ב alt+tab הצלחתי להגיע אליו. הוא נפתח בחלון נפרד ואי אפשר להצמידו לחלון שמראה את האתר. די מעצבן.

התוסף עצמו נראה מאוד יפה (כיאה ל apple), באמצע יש את עץ ה HTML, בצד ימין את ה CSS ו properties של javascript. בצד שמאל רואים את כל הקבצים.

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

Debugger אין שם. ל mac יש את Drosera, אבל לחלונות תצטרכו לקמפל את הקוד.. לא נשמע כיף.

אני בטוח שב mac אין את כל הבעיות הללו. כמו כן מבטיחים שבגרסה 3.2 יהיה debugger מובנה בתוסף.

עד אז אני אכתוב לפיירפוקס ואקווה לטוב בספארי..

כפי שזה נראה, כלי המפתחים של אופרה, Dragonfly הוא הכי קרוב ברמה ל Firebug.

יש לו כלי inspect, יש לו debugger, יש לו עץ HTML, יש לו מאפייני CSS פעילים. כמו כן יש לו ממשק יפה, אם כי מעט לא אינטואיטיבי.

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