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