10 הכלים שמפתח Front End חייב להכיר
16 בנובמבר 2009 מאת רן בן אהרוןFED. כך אנו מכנים את מפתח צד הלקוח Front End Developer. זהו ה-Browser Junkie שנאלץ כל יום לצאת למלחמה עקובה מדם בדפדפנים! דווקא כשהייתם בטוחים שהאתר נראה פרפקט אתם מגלים שתיבת הטקסט יוצאת מהגריד, שהתמונה הראשית לא מתאימה לרקע, שאקספלורר מקפיץ מאות שגיאות סקריפט, שהאתר זוחל ו… מה? זה אמור גם לעבוד באקספלורר 6?!
אל דאגה! לפניכם רשימה של עשרה כלים שיהוו את התחמושת היומיומית של כל FED באשר הוא..
1. Firebug הוא תוסף לפיירפוקס שמאפשר עריכה, אבחון באגים וניטור קוד HTML, CSS ו-Javascript מתוך הדפדפן בזמן גלישה. "כאילו דה" אתם כבר מכירים את זה אבל אם לא הכרתם עד עכשיו - העבודה שלכם עומדת להפוך הרבה יותר מהירה ומובנת.
2. IE tester היא אפליקציה חינמית שניתן לפתוח בה בטאבים את כל סוגי אקספלורר. עובד מושלם. החסרון היחיד הוא שלא ניתן להריץ בו כלי אבחון ולעיתים זה הכרחי.
כפתרון משלים אני משתמש ב-Spoon שבדרך קסם פותח אקספלורר כשמותקן עליו IE developer toolbar וגם Fiddler addon. אז למה לא להשתמש רק בו?.. תאמינו או לא - לא ניתן להקליד בו לתוך שדות טקסט..
3. IE6 developer toolbar הוא תוסף ותיק של אקספלורר 6 שמתפקד כמעין Firebug לוקה. עוזר להבין מה הדפדפן רואה, איזה CSS-ים מוגדרים ומאפשר לשנות ערכים On-the-fly.
4. Dean Edwards Javascript compressor - צמצמו באופן ניכר את גדלי קבצי ה-JS שלכם באמצעות אפליקציית ווב שמשמיטה מרווחים, ירידות שורה והערות שנועדו לקריאות ממילא. בנוסף ניתן גם לבצע אובפוסקציה ו"קידוד".
5. JSlint - רגע לפני שאתם מכווצים את הסקריפטים שלכם, דעו שאתם עלולים לגלות שגיאות בהרצת הסקריפט אם לא הקפדתם על syntax. הכלי JSLint מציג לכם דו"ח מפורט הכולל את כל שגיאות הסינטקס והלוגיקה ואפילו נותן הצעות יעול.
6. YSlow הוא תוסף שמלבש על Firebug, מבית YAHOO! שמציג דו"ח בדמות תעודת ביה"ס אודות ביצועי הדף אליו גלשתם. באמצעותו ניתן להבין היכן "מתבזבז" רוב זמן עליית העמוד והצעות קונקרטיות לשיפור.
7. PNG gauntlet היא תוכנה שמעבדת תמונות PNG ומוציאה אותן מכווצות ועם ערכי צבעים שווים לכל הדפדפנים.
8. Beyond compare היא תוכנה עם יכולת השוואה בין קבצי טקסט למקרים בהם תרצו לאחד גרסאות של אותו הקובץ או להבין את השוני. גם WinMerge עושה את העבודה.
9. Web Developer toolbar - איך חיינו לפני Firebug? התוסף הזה היה המוביל. היום אני משתמש בו כדי לבחון ולידציה של העמוד, לצפות בשגיאות סקריפט, להבין אם עמוד נמצא במצב quirks mode, לצפות ברשימת התמונות בעמוד ועוד כל מיני.
10. sIEve הוא כלי חשוב שמביא איתו יכולות אבחון של זליגות זכרון ב-Javascript. הממשק שלו לא כל כך אינטואיטיבי אבל אני ארחיב עליו בפורום אחר בקרוב.
- בונוס! Ajaxload ו-Preloaders יעזרון לכם ליצור animated gifs של חוויי טעינה.
מכירים עוד כלים שלדעתכם צריכים להחשב בעשיריה הפותחת? רשמו בתגובות!
זליגות זכרון בג'ואה סקריפט? הזכרון לא אמור להיות מנוהל?
אחלה פוסט דרך אגב.
באופן עקרוני, אפשר לתקוע אלמנטים בזכרון הדפדפן מאוד בקלות. מספיק להצמיד Listener כלשהו לאלמנט HTML ואז למחוק את האלמנט. ה-Listener עדיין קיים לכן האלמנט לא מנוקה מהזכרון. יש עוד כל מיני חוקים שצריך להקפיד עליהם לפני מחיקת אלמנטים מה-DOM.
זה רלוונטי במיוחד לאתרים ואפליקציות ווב של היום שעשירים בהתנהגות ומתרחשות מניפולציות DOM רבות ללא ריפרוש הדף (מה שאמור להיות טריגר ל-garbage collector של הדפדפן).
תודה! עוד הרבה פוסטים בנושא FED בדרך :-)
xenocode - אתה יכול לפרט קצת יותר?
הקישור שצירפת לא מוביל לדף בנושא IE6 "העוצמתי"…
האתר עצמו מזכיר כמה כלים למפתחים, אבל במבט שאולי לא מספיק מעמיק, לא הצלחתי לזהות למה מהם התכוונת.
אחלה רשימה, תודה.
היי ישראל, זה הולך ככה. בתמונה תחת הכותרת Internet Explorer 6 תלחץ על Install Plugin Spoon. אחרי ההתקנה, תוכל להפעיל את IE6 באמצעות חזרה אל העמוד ולחיצה על כפתור ההפעלה הירוק הענק. אקספלורר פשוט יפתח. באמת קסם!
עצה קטנה - מכיוון שלא ניתן להקליד בשדות טקסט (ולעיתים זה הכרחי כדי להגיע לעמוד הרצוי) הפעילו את ה-Developer toolbar, בחרו בשדה הטקסט ורשמו value ואת ערך השדה היכן שתמיד רושמים אטריביוטים של CSS. זה מייגע אבל עובד..
אני הייתי מוסיף את HTML Developer - תוסף של פיירפוקס שמקל מאד על זיהוי שגיאות (לעתים גם שגיאות שה-Validator של ה- W3C עצמו לא מזהה) וכן מציע הצעות לתיקון. הוא מתלבש על ה-view source ולפעמים חוסך זמן רב.
אני מניח שאתה מתכוון לתוסף הזה https://addons.mozilla.org/en-US/firefox/addon/249
ניסיתי - אהבתי! כבר מצא לי טעות באתר נטקראפט :-/
נ.ב הוספתי עוד כלי לרשימה - generator של אנימציות טעינה :-)
אני לא מאמין שאתה מדלג על Fiddler, שזה א-ב הרבה לפני הרבה דברים אחרים.
Fiddler הינו פרוקסי המתפקד כ-HTTP-Debugger, דרכו ניתן לבחון את כל הבקשות ששולח הדפדפן בזמן עבודתו בהצגת דפים ותמיכה בגרפיקה ובאפליקטיביות המומשת בהם.
כל בקשה שיוצאת מהלקוח נרשמת ברשימה יחד עם תשובת השרת. במינימום - רואים בקשות שנכשלו (500), בקשות שנדחו (401,404), בקשות שהופנו אל הקאש (300), ובקשות שהצליחו, יחד עם התוכן שנשלח איתם (200).
בתיאור יותר מדוקדק:
מצד הבקשה ה-Fiddler חושף את הבקשות, הHTTP-Headers הנלווים אליהן, הCookies, פרמטרי GET ו POST, חושף מידע על איך הלקוח רואה את השרתים, איך הלקוח מזדהה בפני השרתים.
מצד התשובה - הוא חושף את תשובת השרת, ה-HTTP-Headers, ה-Cookies, התוכן, ותומך בהצגה ידידותית של התוכן.
ה-Fiddler גם מאפשר לוחלל בקשות שמקורן אינו בדפדפן, לשלוח מחדש בקשות שנרשמו, ולהניח Break-Points לפני השליחה, ולפני ניתוח התשובה של כל בקשה.
היי אושר, תודה על הפירוט וההשקעה.
אני לא כללתי אותו ברשימה מכיוון שהוא לא בעשיריה הפותחת של העבודה היומיומית שלי. כמעט לא יוצא לי להשתמש בו. פיירבאג מכסה את רוב הצרכים שלי בכל הקשור ל-ajax / http requests.
אבל בהחלט ל-Fiddler יש מקום של כבוד בסט הכלים של כל מפתח Web ואיש סיסטם בזכות עושר היכולות שלו וגם בזכות היותו כלי cross browser.
הי!
אחלא פוסט,
למי שמעוניילן להיות בחוד החנית, חשוב מאוד גם להכיר את הכלים החדשים של גוגל:
http://code.google.com/closure/
שללא ספק דוחקים את 4 ו-5 ממקומם.
בנוסף, ראוי גם להזכיר לצד YSlow את Google Page Speed:
http://code.google.com/speed/page-speed/
(שאני חושב שקראו לו פעם GFast על אותו משקל…)
אודי
בלוגים ישראליים תמיד מרגישים לי עצלנים, אם בחו"ל מפרסמים לך כלים (והרבה) לשיפור האתר, בארץ יביאו לך 10 כלים מובילים, או רשימה של TOP 5, למרות שהשקעה והבאה של רשימה יותר מלאה של כלים לא יכולה להזיק.
במקום רשימה של 10 הכלים הטובים לדעתכם יכולתם להשקיע יותר לדעתי ולהוציא לפועל פוסט רציני עם שלל כלים, כמה שיותר מהם, ולא לחפש את הטובים ביותר, אלא פשוט לדרג כל אחד עד 5 כוכבים ובכך אתם נותנים את דעתכם מבחינת דירוג בלי לחסוך מהמשתמשים כלים.
דוגמה:
http://www.bryaneisenberg.com/2009/09/free-tools-to-improve-your-website/
בהצלחה לכם בהמשך.
איתי, אתה פלצן.
לא טוב לך, לך תחפש את החברים הווירטואלים שלך בגיזמודו ועזוב אותנו בשקט.
אתה בטח אלה שהולכים למסעדות בחו"ל ואומרים "איכס, יש פה ישראלים"
אוי, אני אמור לבקש סליחה שהפידבק שלי לא חיובי על כל דבר פה? אני מניח שלא.
אין לי כוח להיגרר איתך לויכוחים, עברתי את השלב שבו אני רב עם ילדים ברשת שחושבים "אני יותר טוב ממנו", וסתם תיקח כטיפ, אתה לא חייב לקבל את המשוב שלי, אבל אתה לא יכול להתנהג בחזירות כלפי אנשים שנתנו את דעתם ולא התנפלו או דרסו את מה שנעשה.
אי מתפלא שאישרו את התגובה, אבל כנראה שהיו צריכים קצת לטרפד את התגובה שלי, ובכל זאת התגובה שאחרי הציגה את "הישראלי המכוער", חבל.
Anyway…
הנה עוד כלי מעניין Microsoft Expression Web SuperPreview
דרכו ניתן לצפות בדפי ווב דרך מעין מסך מפוצל שמאפשר להשוות את התצוגה בין דפדפנים שונים. לדוגמה, בצד שמאל רואים IE8 ובצד ימין IE6 וכל אינטראקציה בדף מתרחשת בשניהם במקביל.
רעיון יפה, ניסיתי, לא מצאתי כל כך ערך :-/
תודה רבה, חידש לי קצת
פוסט יעיל מאוד , אני מכיר הרבה מפתחים שלא מכירים או שמעו על חלק מהכלים שנתתם כאן,
האשלה היא האם איכפת למתכנת פרילאנסר שעובד מהצד ,האם הקוד יעיל תקין וכדומה כי זה לא ניראה ככה בשטח,אלפי אתרים בעלי שגיאות ולא בוצע בהם שם יעול..
לפרילאנסר יהיה אכפת רק כשזו תהיה דרישה של הלקוח.
ופני הדברים משתנים. היום לקוחות רבים של נטקראפט באים בציפיה לגיטימית שהעמודים יהיו ברורים לגוגל, יוצגו כהלכה בכרום ויטענו מהר. הסטנדרטיזציה תתפס לבסוף כמשתלמת בעיני כולם אני בטוח.
וואי מעולה אני אשלח את זה למפתח אתרים שלי שבמקרה לא יהיו לי שגיאות באתר גם…..
תודה רבה :)
תודה רבה, אחלה רשימה… אני אישית הורדתי כמה מהם
למרות שאת Firebug אני מכיר ומשתמש כבר הרבה זמן, באמת אחד הכלים השימושיים…
בכל מקרה, תודה רבה..