"Inspect Element" הוא כלי מפתח בדפדפן פיירפוקס שבו תוכל להשתמש כדי לעקוב אחר קוד HTML בכל דף אינטרנט. ניתן לערוך את גיליונות הסגנונות של HTML ו- CSS של דף אינטרנט באמצעות "בדוק אלמנט". אתה יכול לנסות לערוך דף כרצונך ולהחזיר אותו כפי שהוא היה פשוט על ידי טעינה מחדש של דף האינטרנט שנערך.
שלב
חלק 1 מתוך 2: בדיקת אלמנטים
שלב 1. עדכן את Firefox (אופציונלי)
יתכן שלא תוכל לגשת לתכונות הנדונות במאמר זה אם אתה משתמש בגירסה ישנה יותר של Firefox. העדכון יותקן באופן אוטומטי כאשר תבדוק באיזו גירסת Firefox אתה משתמש.
ל- Firefox 9 וגירסאות קודמות אין כלל את הכלי "בדוק אלמנט"
שלב 2. לחץ באמצעות לחצן העכבר הימני על כל רכיב של דף אינטרנט
אתה יכול ללחוץ לחיצה ימנית על כל תמונה, טקסט, רקע או אלמנט. אם לעכבר שלך יש רק כפתור אחד, שילוב של לחיצה שמאלית ומקש השליטה יביא ללחיצה ימנית.
שלב 3. לחץ על "בדוק אלמנט" מהתפריט הנפתח
בתחתית החלון יופיע סרגל כלים. לוח מתחת לסרגל הכלים יופיע גם הוא ויציג את קוד ה- HTML בדף הפעיל.
שלב 4. הכירו את סרגלי הכלים והלוחות הקיימים
כאשר אתה משתמש ב"בדק אלמנט ", ייפתח מספר לוחות מתחת לחלון הדפדפן. להלן מתוארים השמות והפונקציות של סרגלי הכלים והלוחות ב"בדק אלמנט ":
- בשורה העליונה נמצא סרגל הכלים של ארגז הכלים. ישנם מספר כלים שניתן למצוא כאן, אך נתמקד בכפתור המפקח בצד שמאל. ודא שכפתור זה פעיל (מסומן בצבע הלחצן שהופך לכחול כאשר הוא פעיל) לאורך המדריך הזה.
- מתחת לזה, יש שורה של פירורי לחם של רכיבי HTML המציינים את המיקום של האלמנט שנבחר כעת.
- החלונית מתחת להנחיות הניווט מציגה את עץ ה- HTML או "תצוגת סימון" של דף האינטרנט. ה- HTML של הרכיב שנבחר יסומן ויתרכז בחלונית זו.
- החלונית מימין מציגה את גיליון סגנונות ה- CSS של דף האינטרנט הנוכחי.
שלב 5. בחר רכיב אחר
כאשר סרגל הכלים פתוח, תוכל לבחור בקלות אלמנטים אחרים. ישנן שלוש דרכים לעשות זאת:
- רחף מעל שורת HTML כדי לסמן את האלמנט הנבחר (תכונה זו דורשת Firefox 34+). לחץ על ה- HTML כדי לבחור רכיב זה.
- לחץ על הכלי "בחר רכיב" בפינה השמאלית של סרגל הכלים: יש לו סמל בצורת סמן מעל תיבה. הזז את הסמן בדף האינטרנט כדי לסמן אלמנט ולחץ כדי לבחור אותו.
שלב 6. עקוב אחר קוד ה- HTML
לחץ בכל מקום בחלונית ה- HTML. השתמש במקשי הכיוון השמאליים והימניים במקלדת כדי לעבור מקוד לקוד (תכונה זו דורשת Firefox 39+). שיטה זו שימושית לבחירת אלמנטים קטנים מדי מכדי לבחור עם הסמן.
- HTML אפור מציין אלמנטים שאינם מוצגים בדף. האלמנטים הכלולים בזה הם הערות, כמו צמתים, ואלמנטים אחרים המוסתרים על ידי מאפיין התצוגה של CSS.
- לחץ על החץ משמאל לתיבה כדי להציג או להסתיר את התוכן. כדי להציג את כל התוכן, לחץ לחיצה ארוכה על החץ alt="תמונה" או אפשרות.
שלב 7. אתר את האלמנט
חפש את שדה החיפוש (אייקון בצורת לולאה) בפינה הימנית הקיצונית של שורת פירורי הלחם. לחץ כדי להרחיב את שדה החיפוש והקלד את קוד ה- HTML שברצונך לחפש. תוך כדי הקלדה, יוצג חלון מוקפץ המציג תוצאות חיפוש תואמות. לחץ על אלמנט מתוצאות החיפוש וגלול בחלונית ה- HTML אל הקוד שאתה מחפש.
חלק 2 מתוך 2: עריכת HTML
שלב 1. טען מחדש את הדף כדי להתחיל מחדש
אם אתה חדש בכלים לפיתוח אתרים, שים לב שאתה לא מבצע שינויים קבועים בדפים שאתה עורך. העריכות שלך מופיעות רק על המסך עד שאתה טוען מחדש את הדף או סוגר אותו. אל תהסס להתנסות גם אם אינך יודע מה יקרה.
שלב 2. לחץ פעמיים על ה- HTML לעריכה
לחץ פעמיים על HTML מוטבע. הקלד את הטקסט החדש והקש Enter כדי לשמור את השינויים.
שלב 3. לחץ והחזק את הכלי בפירורי הלחם כדי להציג אפשרויות נוספות
שים לב שסרגל הכלים של פירורי הלחם יושב בין עץ ה- HTML לסרגל הכלים שמעליו. לחץ והחזק כלי בשורה זו כדי לפתוח תפריטים נוספים. להלן רמז לאפשרויות הזמינות (לא ממצות):
- "ערוך כ- HTML" מאפשר לך לערוך את כל תוכן ה- HTML מעץ ה- HTML ישירות במקום לערוך כל שורה.
- "העתק HTML פנימי" מעתיק את כל התוכן בתוך הצומת, ואילו "העתק HTML חיצוני" מעתיק את התוכן והצמתים (כגון או
- "הדבק →" מעלה מספר אפשרויות היכן להדביק את העותק, כגון לפני הצומת או אחרי הילד הראשון של הצומת.
- : ריחוף,: פעיל ו: מיקוד משנה את מראה האלמנט כאשר המשתמש מקיים אינטראקציה. האפקטים שהשתנו מוגדרים מתוך גיליון הסגנונות של CSS (ניתן לערוך מהחלונית מימין).
שלב 4. גרור ושחרר
כדי לסדר מחדש רכיבים בקוד, לחץ והחזק את ה- HTML עד להופעת קו מנוקד. הזז את הקו למעלה ולמטה בעץ ושחרר את לחצן העכבר כשהקו נמצא במקום הרצוי לך.
תכונה זו דורשת Firefox 39 ואילך
שלב 5. סגור את סרגל הכלים של המפתחים
כדי לסגור את כל חלון Inspect Element, לחץ על הלחצן X בפינה השמאלית העליונה של סרגל הכלים הממוקם מעל לוח CSS.
טיפים
- תוכל גם לפתוח את סרגל הכלים מתוך אפשרויות התפריט בחלק העליון של החלון:
- Windows: Firefox → מפתח אינטרנט → כלים להחלפה
- Mac או Linux: כלים → מפתח אינטרנט → כלים להחלפה
- ל- Firefox 40 יש אפשרות להסתיר את לוח CSS כך שיהיה לך יותר מקום לערוך HTML. חפש את סמל החץ בפינה הימנית ביותר של שורת פירורי הלחם ומימין לשדה החיפוש. לחץ על סמל זה כדי להסתיר את לוח CSS ולחץ שוב כדי להעלות אותו.
- תוכל גם לערוך לוחות CSS, אך הם אינם מופיעים במאמר זה. תוכל למצוא הוראות לעריכת קוד CSS באינטרנט.
