Firebug - מדריך מהיר
שימוש
איתור ועריכה של אלמנט html
זוהי הפונקציה שתהיה ככל הנראה השימושית ביותר עבורכם.
איתור אלמנט נעשה ע"י לחיצה על כפתור 'inspect' . מייד אחרי הלחיצה הופך הדף להיות רגיש למעבר סמן העכבר מעל חלקיו - האלמנט שנמצא תחת הסמן ממוסגר, ובמקביל מודגש הקוד הרלוונטי בחלון התחתון. לחיצה על האלמנט המבוקש בוחרת אותו ו"מקבעת" את הבחירה. במצב זה ניתן להצביע עם הסמן על אלמנט בקוד ולראות את השטח שהוא תופס על הדף. בדרך כלל יסומנו גם השוליים והריפוד (padding) של האלמנט בצבעים שונים. הקוד מופיע בצורת עץ כך שבכל שלב מופיעה רק הרמה החיצונית (או העליונה) של האלמנט. ליד כל אלמנט ממוקם כפתור '+' המאפשר פתיחה שלו וצפייה באלמנטים המוכלים בו. לחיצה כפולה על חלק כלשהו של הקוד פותחת אותו במקום לעריכה.
בחלק הימני של חלון ה-firebug מופיע עורך ה-css בו ממוקם קוד ה-css השייך לאלמנט הנבחר. בעורך זה אפשר לבצע מניפולציות על התכונות. מעבר סמן העכבר מעל תכונה גורם להופעת סמל מחיקה בצידה השמאלי. לחיצה על סמל זה תבטל את השפעת התכונה על האלמנט, כאשר תוצאת הביטול מופיעה באופן מיידי בדף. לחיצה על שם התכונה פותחת אותה לעריכה. לחיצה על ערך התכונה מאפשרת עריכה - גם כאן התוצאות מתבטאות מייד על הדף. אם הערך הוא מספר - אפשר לשנותו באמצעות מקשי החיצים.
חיפוש וצפייה בקבצי css
למוד זה מגיעים ע"י לחיצה על כפתור css.
כעת נראה שלתפריט העליון נוסף כפתור (מימין לכפתור 'edit') שלחיצה עליו מגלה רשימה נגללת של קבצי css הזמינים לדף. בחירה באחד מהם פותחת את רשימת התכונות והערכים בחלון הראשי, ומאפשרת את הפעולות שתוארו בפיסקה הקודמת. לחיצה על 'edit' פותחת את הקובץ בצורתו המקורית.
צפיה בקבצים ועריכת debug ב-javascript
למוד זה מגיעים ע"י לחיצה על כפתור Script.
כעת יתווסף תפריט נגלל לשורת התפריטים העליונה שכולל את קבצי ה-javascript הזמינים לדף הנוכחי. החלון המרכזי נחלק לשניים - משמאל מופיעות השורות הממוספרות של הקובץ, ומימין - חלון ה-debug בו אפשר לצפות בערכם של ביטויים נבחרים בזמן אמת ולקבוע נקודות עצירה. (עוד על השימוש ב-debugger אכתוב במאמר נפרד)
ניתוח התעבורה ברשת
למוד זה מגיעים ע"י לחיצה על הכפתור 'Net'.
בשורת התפריט העליונה מתווספים הכפתורים 'ALL', 'HTML', 'CSS' ועוד. בחלון הראשי מופיעה רשימה של כל הקבצים שהורדו לדפדפן בבקשת הדף האחרונה. בכל שורה כזו נרשם שם הקובץ, כתובת השרת, וגודל הקובץ. בהמשך השורה מופיע פס אפור המציין את זמן ההורדה של הקובץ ואת תזמון ההורדה ביחס לשאר הקבצים. זמן זה כתוב גם בספרות מצד ימין של הפס.
ניתן למיין את התצוגה ע"פ סוג הקובץ. לדוגמה - כדי לראות רק את תעבורת קבצי התמונה, נלחץ על הכפתור 'Images' בשורת התפריט העליונה.