תגובות

10 התוספים השימושיים ביותר בפיירפוקס למעצבי / בוני / מפתחי אתרים

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

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

להלן 10 התוספים השימושיים ביותר לפיירפוקס למעצבי / בוני / מפתחי אתרים שהתקנתם על הדפדפן היא בגדר חובה!

1. FireBug – התוסף מס' 1 למפתחי אתרים. מאפשר ניתוח מעמיק של דפי אינטרנט ברמת הHTML הCSS ואפילו הJS. נותן אפשרות לקבלת מידע על אלמנטים בדף הכולל את: מיקום האלמנט (או התגית) בהיררכית הHTML, הגדרות הCSS החלים עליו, סימון ויזואלי על הדף להמחשת המיקום והריווח של האוביקט.

קישור להתקנת התוסף FireBug.

2. Web Developer – ה"Web Developer" מוסיף לפיירפוקס סרגל כלים עם כלי הפיתוח השונים באינטרנט. מאפשר גישה נוחה לCSS של האתר, נותן אפשרות לערוך אותו ומציג תוך כדי את השינויים בעמוד. בנוסף, בתפריט ה"כלים" של התוסף יש אפשרות את התאימות של הדף בדפדפנים השונים ולבצע בדיקת אימות אל מול תקן הW3C העולמי. עוד כלי מעולה, מומלץ בחום!

קישור להתקנת התוסף Web Developer.

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

קישור להתקנת התוסף IE Tab.

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

קישור להתקנת התוסף ColorZilla.

5. Html Validator – התוסף הזה מוסיף חלוניות אימות HTML לפיירפוקס בהן הוא מראה את מס' השגיאות שנתגלו בעמוד.

קישור להתקנת התוסף HTML Validator.

6. Total Validator – מחשבון אימות HTML הנותן אפשרות לבצע מבחני תאימות לרוב סוגי הדפדפנים לגירסותיהם השונות ולקבל תוצאות מידיות.

קישור להתקנת התוסף Total Validator.

7. MeasureIt – תוסף חמוד המאפשר מדידה של גובה ורוחב (בפיקסלים) של אוביקטים על העמוד.

קישור להתקנת התוסף MeasureIt.

8. Screengrab – כלי יעיל המאפשר לשמור את העמוד בו אתה נמצא כתמונה. בניגוד לPrint Screen רגיל בתוך הכלי יש אפשרות בחירה בין אם לשמור את כל העמוד כתמונה (כולל האיזורים שמגיעים אליהם בעזרת גלילה) לבין אם לשמור רק את החלק הנראה לעין.

קישור להתקנת התוסף ScreenGrab.

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

קישור להתקנת התוסף Open With Photoshop.

10. TextArea Cache – אחד התוספים השימושיים ביותר. התוסף שומר את הטקסט האחרון שנכתב בתיבות טקסט אפילו במצב שבו הפיירפוקס כיבה את עצמו בגלל שגיאה. מעולה לשימוש בטפסים שלא נשלחו כמו שצריך למשל. את התוסף מפעילים דרך אייקון קטן בשורת המצב של הפיירפוקס.

קישור להתקנת התוסף TextArea Cache.

קצת על דניאל שטרנליכט

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

9 תגובות לפוסט "10 התוספים השימושיים ביותר בפיירפוקס למעצבי / בוני / מפתחי אתרים"

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

  • מעולה. תודה.

  • תודה על הפוסט. כלים שימושיים ביותר.

    תרשה לי רק לחלוק על ההתייחסות שלך לIE ולCHROME:

    בIE8 ישנו את כלי הפיתוח (F12) שנותן לך את את הפונקצינליות של FireBug ולדעתי אפילו באופן נוח יותר.

    הוא כולל: צפיה בעץ הhtml, עריכה של מאפייני CSS, ניתן לראות את ירושות הCSS, ועוד… וכמובן כלי דיבוג לJavaScript.

    הוא כולל כמו כן: סרגל מדידת פיקסלים, וכלי דגימת צבע.

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

  • פז ועוזיאל – תודה לכם!

    מתי – בעניין כלי הפיתוח של IE דווקא אני אחלוק עליך בחזרה! אמנם יש בו את הפונקציונליות של הפיירבאג, אבל אין בו את האפשרות לInspect Element, שזו אחת מהאפשרויות היותר שמישות שיש.

    לגבי ההתייחסות לכרום, לא מכיר, טוב לדעת!:)

  • אין לו את הלInspect Element בקליק הימני אבל יש לו לחצן חץ שמעביר למצב Inspect Element.

    מודה שבקליק ימני זה יהיה יותר מוצלח.

  • יפה מאוד.

    דרך אגב, במה אתה מעדיף להשתמש בכדי להעתיק תמונה מהאינטרנט ולגזור ולערוך אותה?

  • במקש ימני בעכבר-שמירת תמונה בשם ומשם לפוטושופ / או לגרור את התמונה ישירות לפוטושופ.

  • אחלה פוסט – עבודה יפה – אהבתי!

כתיבת תגובה

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