ראה HTML ו- CSS של כל דף אינטרנט
האתר בנוי עם שורות של קוד , אבל התוצאה היא דפים ספציפיים עם תמונות, וידאו, גופנים ועוד. כדי לשנות אחד מהאלמנטים האלה או לראות מה הוא מורכב, עליך למצוא את השורה הספציפית של הקוד השולט בה. אתה יכול לעשות את זה עם כלי בדיקה אלמנט.
רוב דפדפני האינטרנט לא לגרום לך להוריד כלי בדיקה או להתקין הרחבה. במקום זאת, הם מאפשרים לך ללחוץ לחיצה ימנית על אלמנט הדף ולבחור באפשרות בדוק או בדוק אלמנט . עם זאת, התהליך עשוי להיות שונה מעט בדפדפן שלך.
בדוק רכיבים ב- Chrome
הגרסאות העדכניות ביותר של Google Chrome מאפשרות לך לבדוק את הדף בכמה דרכים, שכולן משתמשות ב- DevTools המובנה של Chrome:
- לחץ לחיצה ימנית על משהו בדף (או באזור ריק) ובחר באפשרות בדוק
- הזן את קיצור המקשים Ctrl + Shift + I
- השתמש בתפריט Chrome כדי לגשת אל האפשרות כלים נוספים> כלים למפתחים
ה- DevTools של Chrome מאפשרים לך לעשות דברים כמו בקלות להעתיק או לערוך שורות HTML או להסתיר או למחוק רכיבים לגמרי (עד טעינת הדף מחדש).
לאחר ש- DevTools נפתח בצד הדף, באפשרותך לשנות את המיקום שבו הוא ממוקם, להוציא אותו מהדף, לחפש את כל הקבצים של הדף, לבחור רכיבים מהדף לבדיקה ספציפית, להעתיק קבצים וכתובות אתר ואפילו להתאים אישית חבורה של ההגדרות.
בדוק אלמנטים ב- Firefox
כמו Chrome, פיירפוקס יש כמה דרכים שונות לפתוח את הכלי שנקרא מפקח:
- לחץ לחיצה ימנית על אזור ריק בעמוד או בחר אלמנט ובחר באפשרות בדוק אלמנט
- הזן Ctrl + Shift + T או Ctrl + Shift + I במקלדת
- מתפריט Firefox, לחץ על מפתח > מפקח
- בתפריט כלים , לחץ על מפתח אינטרנט> מפקח
כאשר אתה מזיז את העכבר מעל אלמנטים שונים ב- Firefox, כלי המפקח מוצא באופן אוטומטי את פרטי קוד המקור של האלמנט. לחץ על אלמנט ו "על- the-fly החיפוש" יפסיק ואתה יכול לבחון את האלמנט מחלון מפקח.
לחץ לחיצה ימנית על אלמנט כדי לאתר את כל הפקדים הנתמכים. תוכל לעשות דברים כמו לערוך את הדף כ- HTML, להעתיק או להדביק קוד HTML פנימי או חיצוני, להציג מאפייני DOM, צילום מסך או למחוק את הצומת, להחיל בקלות תכונות חדשות, לראות את כל ה- CSS של הדף ועוד.
בדוק אלמנטים באופרה
אופרה יכולה לבדוק גם אלמנטים, עם הכלי DOM מפקח זהה לזה של Chrome. הנה איך להגיע אליו:
- השתמש במקש הקיצור Ctrl + Shift + I
- נווט אל תפריט> כלים נוספים> הצג תפריט מפתח ולאחר מכן פתח את התפריט דרך תפריט> מפתח> כלי מפתחים
- מתפריט קליק ימני על כל רכיב בדף, בחר באפשרות אלמנט בדוק
בדוק אלמנטים ב- Internet Explorer
כלי בדיקה דומה, שנקרא כלי פיתוח, זמין ב- Internet Explorer:
- הקש על F12 במקלדת
- השתמש באפשרות כלים> F12 תפריט תפריט (פגע Alt + X אם אתה לא רואה את התפריט כלים )
- לחץ לחיצה ימנית על הדף ולחץ על בדיקת אלמנט
IE יש כלי אלמנט בחר בתפריט החדש הזה, המאפשר לך ללחוץ על כל רכיב הדף כדי לראות את HTML ו- CSS פרטים. ניתן גם להשבית / לאפשר הדגשת אלמנטים בקלות בעת הגלישה באמצעות הכרטיסייה DOM Explorer .
כמו שאר כלי מפקח אלמנטים בדפדפנים לעיל, Internet Explorer מאפשר לך לגזור, להעתיק ולהדביק אלמנטים, כמו גם לערוך את HTML, להוסיף תכונות, להעתיק אלמנטים עם סגנונות המצורפת, ועוד.