HTML וכל מה שמסביב

מה זה Firebug?

מה זה?

Firebug הוא תוסף לפיירפוקס שמאפשר לדבג קוד HTML כולל CSS וג'אווה סקריפט.

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

את Firebug אפשר להוריד מהאתר הזה. כאשר תגיעו לאתר יש ללחוץ על המלבן האדום בצד ימין למעלה (…Install Firebug) ואז התוסף יותקן. שימו לב שזה עובד רק עם פיירפוקס!

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

כלומר הגירסא שמותקנת אצלי היא 1.5.3 (למרות שבאתר של firebug כתוב 1.5.2), כל האפשרויות פעילות, וכרגע התוסף הוא במצב minimized.

עכשיו נעבור לדוגמא אמיתית.

בהסברים שלי על ג'אווה סקריפט כתבתי דוגמא לפונקציה שמחשבת ריבוע של מספר. הקוד נמצא בקובץ func.html ואני הולך לדבג אותו בכדי להדגים את השימוש ב firebug. כאשר לוחצים על הסמל של הג'וק, מקבלים את המסך הבא:

נראה מפחיד? אז לא להבהל. קודם כל זה נפתח בתוך פיירפוקס ותמיד אפשר לסגור את זה.

ועכשיו להסברים (סימנתי באדום אזורים מ1 עד 7):

  1. סמל הג'וק – לחיצה עם הכפתור השמאלי של העבכר על הסמל תפתח תפריט עם מספר אפשרויות.
    מספר אפשרויות:

    • Open Firebug in new window – פתיחת התוסף בחלון נפרד.
    • Text size – שינוי גודל הטקסט.
    • Options – פתיחת תפריט אפשרויות.
    • …About – רשימת האנשים שתרמו לתוסף.
  2. לחיצה עם הכפתור השמאלי של העכבר על הסמל הזה תגרום להצגת הקוד בצורת עץ. במצב זה אפשר לעבור עם העכבר על פני העץ ולראות את החלק הרלוונטי בדף מודגש.
  3. זוהי שורת התפריטים (menu bar) של התוסף. לחיצה על אחד התפריטים תעבור למצב המתאים.
  4. זהו האזור של הקוד. שימו לב לחץ הצהוב בשורה 10 – זוהי נקודת עצירה (breakpoint). בזמן ריצה, התוסף עוצר בנקודות העצירה, אם הוא מגיע אליהן. אפשר להגדיר נקודת עצירה בכל שורת קוד ע"י לחיצה עם הכפתור השמאלי של העכבר על מספר השורה.
    שימו לב ל 4 הסמלים מעל האזור הזה. הסמלים ממשיכים את הריצה באופן הבא (משמאל לימין):

    • חץ כחול ימינה – ממשיך את ריצת התכנית עד ל breakpoint הבא, או עד לסיום התכנית.
    • חץ צהוב ימינה ולמטה – נכנס לתוך פונקציה (אם קיימת כזו).
    • חץ צהוב למעלה, ימינה ולמטה – עובר לשורת הקוד הבאה.
    • חץ צהוב למעלה וימינה – יציאה מפונקציה.

    שימו לב שכעת אנחנו במצב Script. מעבר למצב אחר ישנה את התוכן של איזור זה, ואת אזורים 6 ו 7 (בחלק מהמצבים הם לא יופיעו כלל).

  5. אזור הסמלים (משמאל לימין):
    • מזעור התוסף.
    • פתיחת התוסף בחלון נפרד – אפשרות מאוד נוחה.
    • סגירת התוסף עבור הדף הנוכחי.
  6. איזור תפריטים ימני עם האפשרויות הבאות:
    • Watch – מאפשר לראות ולשנות ערכים בזמן ריצה.
    • Stack – מאפשר לראות את תוכן המחסנית בזמן ריצה.
    • Breakpoints – מאפשר לראות את רשימת נקודות העצירה.
  7. איזור התוכן של ה Watch. מאפשר לראות את תוכן המשתנים. כאשר עוברים ל Stack ול Breakpoints, אפשר לראות את המחסנית ונקודות העצירה בהתאם.

הרחבות ל Firebug

לתוסף הזה יש מספר רב של הרחבות. חלק מהם:

  1. Chromebug – מאפשר להריץ את Firebug על Google Chrome.
  2. Firecookie – מאפשר לטפל בעוגיות בצורה קלה יותר.
  3. FireQuery – מאפשר טיפול בקוד שכתוב ב jQuery.
  4. Firediff – מאפשר לראות שינויים שנעשו בקוד.
  5. FireRainbow – מאפשר Syntax Highlighting לקוד ג'אווה סקריפט.
  6. SenSEO – מאפשר לראות איך הדף ממלא את הקריטריונים של SEO.

כמובן שיש עוד הרחבות רבות ואתם מוזמנים לנסות אותן.

רפרנס

אתר הבית של Firebug.

יש גם מספר אתרים בעברית, אבל הם חלקיים מאוד.

מודעות פרסומת

להגיב »

עדיין אין תגובות.

RSS feed for comments on this post. TrackBack URI

להשאיר תגובה

הזינו את פרטיכם בטופס, או לחצו על אחד מהאייקונים כדי להשתמש בחשבון קיים:

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

יצירה של אתר חינמי או בלוג ב־WordPress.com.

%d בלוגרים אהבו את זה: