מה זה בכלל?

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

אם אין לכם פיירפוקס - הורידו אותו מכאן.

לדפדפן כרום יש פיירבאג מובנה, אז אם הינך משתמש בכרום תוכל להשתמש בכלי הפיירבאג שלו.

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

איפה מורידים ומתקינים? כאן (להזכירכם, לדפדפן כרום הכלי מגיע מובנה ולא צריך להוריד ולהתקין)

אוקי, התקנתי, מה עכשיו?

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

כעת העבירו את העכבר על האתר שלכם, וצפו בקוד.

טריקים בסיסיים

יש המון טריקים בפיירבאג שהופכים את החיים ליותר כלים. אלו רק הטיפים הבסיסים ביותר:

איתור הקובץ הרצוי

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

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

מיקום בתוך HTML

באחד הצדדים יופיע לכם הקוד בצורת "עץ". תוכלו לעלות רמות על ידי לחיצה על חלקי העץ בשביל לחפש מה בתוך מה. מאוד עוזר להבין כיצד הוראות ה CSS  יורדות ולאן.

ניתן לכתוב בתוך הפיירבאג !

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

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

ניתן לשנות את מה שכתבתנו עם החצים

הוראה זו היא מאוד נוחה למעצבי אתרים. ניתן לבחור צבע לאתר בשם. לדוגמה:background: red

לאחר מכן ללחוץ על משהו אחר, ולחזור ללחוץ על הצבא שכתבתנו. כעת שחקו עם החיצים למעלה ולמטה ותראו פלא גאוני.

עליך להירשם כדי להוסיף תגובות

נתן שלווה

מעצב ומתכנת פרילנסר. מלמד בנס-טכנולוגיות, שנקר ועוד.