webdev - מדריך בניית אתרים בקוד פתוח


מדריכים     סקירות       אודות     פניות הציבור      

Firebug - מדריך מהיר

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

התקנה

התקנת פיירבאג נעשית בקלות מכאן. (יתכן שפיירפוקס יחסום את החלון שממנו מתבצעת ההתקנה - יש לאפשר לו לעלות)

הפעלה

הדרך הסטנדרטית להפעלת פיירבאג היא לחיצה על F12, לחיצה נוספת סוגרת אותו. אפשרות אחרת להפעלה היא משורת התפריט - Tools->Firebug->Open Firebug. התוכנה נפתחת בחלק התחתון של הדף. שורת התפריטים העליונה כוללת שלושה כפתורים:

  • כפתור 'אפשרויות' (עם תמונה של ג'וק) - בין היתר ניתן לקבוע כאן שפיירבאג יפתח תמיד בחלון נפרד.
  • כפתור 'inspect' - לאיתור ועריכה של אלמנטים.
  • כפתור 'edit' - לעריכה ישירה של אלמנטים.

שורת התפריטים השניה כוללת את הכפתורים הבאים:

  • Console - איתור של תקלות בקוד javascript.
  • HTML - איתור ועריכה של אלמנטי html.
  • CSS - צפייה בקבצי css ועריכת שינויים בהם באופן ישיר.
  • Script - צפייה בקבצי javascript, ו - debugger משוכלל לניפוי שגיאות.
  • DOM - צפיה במבנה ה - dom של הדף ואיתור אלמנטים בודדים.
  • Net - בדיקת התעבורה מהדפדפן לאתר.