כיצד להשתמש באלמנט הבדיקה ב- Mozilla Firefox?
מתחת לסרגל הכלים, יש שורה בודדת של פירורי לחם של רכיבי HTML, המציגה את הנתיב המלא המתייחס לאלמנט שנבחר.
כלי המפתח בדוק הרכיב ב- Firefox מאפשר לך לאתר את קוד ה- HTML עבור כל דבר שאתה רואה בדף האינטרנט שלך. ה- HTML וגליון הסגנונות הנלווה ל CSS ניתנים לעריכה מלאה לאחר פתיחת הכלים הללו. התנסה בכל שינוי שתרצה, ואז רענן את הדף כדי לחזור למראה המיועד של דף האינטרנט.
חלק 1 מתוך 2: בדיקת אלמנטים
- 1לחץ לחיצה ימנית על כל רכיב דף אינטרנט. אתה יכול ללחוץ לחיצה ימנית על תמונות, טקסט, רקעים או כל אלמנט אחר. אם אין לך עכבר עם שני כפתורים, לחץ לחיצה ימנית תוך כדי החזקות Control.
- 2לחץ על אלמנט בדוק מהתפריט הנפתח. סרגל כלים אמור להופיע בתחתית החלון. חלונית תופיע גם מתחת לסרגל הכלים, ותציג את קוד ה- HTML של הדף.
- 3זהה את סרגלי הכלים והחלוניות. כשתלחץ על בדוק אלמנט, כמה חלונות ייפתחו בתחתית החלון שלך. הנה פירוט השימושים והשמות שלהם:
- השורה העליונה היא סרגל הכלים של ארגז הכלים. יש לזה כמה כלי מפתח, אך אנו מעוניינים ב- Inspector בצד שמאל. שמור את זה שנבחר (מודגש בכחול) לכל המדריך הזה.
- מתחת לסרגל הכלים, יש שורה בודדת של פירורי לחם של רכיבי HTML, המציגה את הנתיב המלא המתייחס לאלמנט שנבחר.
- החלונית שמתחת לשורה זו מציגה את עץ ה- HTML או את "תצוגת הסימון" של הדף. ה- HTML עבור האלמנט שבחרת מודגש ובמרכזו בחלונית זו.
- החלונית מימין מציגה את גיליון הסגנונות של CSS לדף זה.
- 4בחר אלמנט אחר. ברגע שסרגל הכלים פתוח, בחירה באלמנט אחר היא קלה. להלן שלוש דרכים לעשות זאת:
- העבר את העכבר מעל שורה של HTML כדי להדגיש את האלמנט המתאים (דורש Firefox 34+). לחץ על ה- HTML כדי לבחור רכיב זה.
- לחץ על הכלי בחר אלמנט בקצה השמאלי ביותר של סרגל הכלים: הסמל הוא סמן מעל ריבוע. העבר את הסמן מעל הדף כדי להדגיש אלמנטים, ואז לחץ כדי לבחור אלמנט.
- 5נווט בקוד. לחץ במקום כלשהו בחלונית HTML. השתמש בחצים שמאלה וימינה במקלדת כדי לעבור דרך הקוד (דורש Firefox 39+). זה שימושי עבור אלמנטים קטנים מכדי לבחור ביד.
- HTML אפור מתייחס לאלמנטים שלא מוצגים בדף. זה כולל הערות, צמתים מסוימים כגון <head> ואלמנטים שהוסתרו במאפיין התצוגה של CSS.
- לחץ על החץ משמאל למכולות כדי להרחיב או להסתיר את תוכנו. להרחבת כל התוכן, החזק את מקש Alt או Option תוך כדי לחיצה.
- 6חפש אלמנט. חפש את סרגל החיפוש (סמל זכוכית מגדלת) בקצה הימני ביותר של שורת פירורי הלחם. לחץ על זה כדי להרחיב אותו והקלד את קוד ה- HTML שאתה מחפש. תוך כדי הקלדה יופיע קופץ המציג אלמנטים תואמים. לחץ על אחד כדי לבחור את האלמנט הזה וגלול את חלונית ה- HTML לקוד שלו.
לחץ על אלמנט בדוק מהתפריט הנפתח.
חלק 2 מתוך 2: עריכת ה- HTML
- 1רענן את הדף כדי להתחיל מחדש בכל עת. אם אתה חדש בכלים למפתחי אתרים, הבן שהם לא מבצעים שינויים קבועים. העריכות שלך יהיו גלויות רק על המסך שלך, ורק עד שתסגור את הדף או תרענן אותו. אל תהססו להתנסות גם אם אינכם בטוחים מה יקרה.
- 2לחץ פעמיים על ה- HTML כדי לערוך טקסט. לחץ פעמיים על שורה של HTML. הקלד את הטקסט החדש ולחץ על Enter כדי לשמור את השינויים שלך.
- 3לחץ והחזק פירור לחם לקבלת אפשרויות נוספות. זכרו, סרגל הכלים Breadcrumb משובץ בין עץ ה- HTML המלא לסרגל הכלים העליון. לחץ והחזק את אחד האלמנטים בשורה זו כדי לפתוח תפריט נרחב. הנה מדריך שלם לאפשרויות הבאות:
- "ערוך כ- HTML" הופך את הצומת וכל תוכנו לעריכה בעץ ה- HTML, במקום שיהיה צורך לערוך כל שורה בנפרד.
- "העתק HTML פנימי" מעתיק את כל תוכן הצומת, ואילו "העתק HTML חיצוני" מעתיק גם את הצומת (כגון <div> או <body>
- "הדבק →" מוביל למספר אפשרויות היכן להדביק, כגון לפני צומת זה או אחרי הילד הראשון של הצומת.
- : רחף,: פעיל, ו: מיקוד משנה את מראה האלמנט כאשר המשתמש מקיים איתו קשר. ההשפעה המדויקת נקבעת על ידי גיליון הסגנונות של CSS (ניתן לעריכה מחלונית ימין).
- 4גרור ושחרר. כדי לסדר מחדש את האלמנטים בקוד, לחץ והחזק את ה- HTML עד להופעת קו מקווקו. הזז אותו מעלה או מטה על העץ ושחרר כאשר הקו המקווקו נמצא במקום הרצוי.
- לשם כך נדרש Firefox 39 ואילך.
- 5סגור את סרגל הכלים למפתחים. כדי לסגור את כל החלונות המהודרים האלה, פשוט לחץ על ה- X בפינה הימנית ביותר של סרגל הכלים, מעל חלונית CSS.
לחץ על אחד כדי לבחור את האלמנט הזה וגלול את חלונית ה- HTML לקוד שלו.
- אתה יכול גם לפתוח את סרגל הכלים באמצעות אפשרויות התפריט העליון האלה:
- Windows: Firefox → מפתח אתרים → Toggle Tools
- מק או לינוקס: כלים → מפתח אתרים → החלף כלים
- Firefox 40 הציג את האפשרות להסתיר את חלונית CSS כדי לתת לך יותר מקום בעת עריכת HTML. חפש את סמל החץ בקצה הימני ביותר של שורת פירורי הלחם, משמאל לסרגל החיפוש. לחץ על סמל זה כדי להסתיר את חלונית CSS ולחץ עליו שוב כדי להרחיב אותו שוב.
- ניתן לערוך את חלונית CSS, אך זה מעבר לתחום המדריך הזה. מאמר זה מלמד את יסודות ה- CSS.
שאלות ותשובות
- מהם המספרים המופיעים לאחר 'IMG' בתמונה במפקח?סביר להניח שהם בעלי תכונות רוחב וגובה.
שאלות ללא מענה
- כיצד אוכל לבצע שינויים קבועים בכלי המפתחים?
