מה צריך לדעת
-
בספארי: לחץ לחיצה ימנית על דף אינטרנט ובחר Inspect Element.
- ב-Chrome, אתה יכול ללחוץ לחיצה ימנית וללחוץ על Inspect.
- כדי להפעיל את התכונה בספארי: Safari > Preferences > Advanced > בדוק את הצג תפריט פיתוח בשורת התפריט תיבת.
מאמר זה מלמד אותך כיצד לבדוק רכיב של אתר ב-Mac. זה בוחן כיצד לעשות זאת באמצעות Safari ו-Google Chrome.
איך משתמשים בתכונת Inspect Element ב-Mac?
לפני בדיקת רכיבים ב-Mac בעת שימוש ב-Safari, עליך להפעיל את תפריט המפתחים בדפדפן. הנה מבט על איך להפעיל אותו ומה לעשות כדי לבדוק אלמנט.
אם אתה יכול לראות פיתוח בין סימניות וחלון, תפריט המפתחים כבר הופעל, ותוכל לדלג לשלב 4.
שימוש בתכונת Inspect Element ב-Safari
הנה איך להשתמש ב-Inspect Element ב-Safari, דפדפן ברירת המחדל במחשבי Mac.
-
בספארי, לחץ על Safari > Preferences.
Image -
לחץ Advanced.
Image -
לחץ על הצג תפריט פיתוח בשורת התפריטים ואז סגור את החלון.
Image - בעת גלישה באתר, לחץ לחיצה ימנית על הפריט שברצונך לבדוק.
-
לחץ על בדוק את האלמנט.
Image -
עכשיו אתה יכול לראות את הקוד מאחורי האתר שבדקת.
Image
שימוש בתכונת Inspect Element ב-Chrome ב-Mac
אם אתה משתמש ב-Chrome במקום ב-Safari ב-Mac שלך, זה אפילו יותר קל להציג אלמנט מכיוון שאין צורך להפעיל את התכונה. הנה מה לעשות.
- ב-Chrome, דפדף לאתר.
- לחץ ימני על הרכיב שברצונך לבדוק.
-
לחץ על Inspect.
Image -
עכשיו אתה יכול להציג את הקוד בחלון צד ב-Chrome.
Image
למה אני לא יכול לבדוק ב-Mac שלי?
ייתכן שלא תוכל לבדוק רכיב ב-Mac שלך אם לא הפעלת את תפריט המפתחים ב-Safari. הנה תזכורת כיצד לעשות זאת.
-
בספארי, לחץ על Safari > Preferences.
Image -
לחץ Advanced.
Image -
לחץ על הצג תפריט פיתוח בשורת התפריטים ואז סגור את החלון.
Image
איך לבצע שינויים באתר על ידי בדיקת האלמנט
מלבד לאפשר לך להציג את הקוד באתר, אפשר גם לשנות באופן זמני כל רכיב באתר דרך Inspect Element. הנה איך לעשות זאת באמצעות Safari.
התהליך דומה מאוד בדפדפנים אחרים.
- בעת גלישה באתר, לחץ לחיצה ימנית על הפריט שברצונך לבדוק.
- לחץ על בדוק את האלמנט.
- לחץ פעמיים על הטקסט בקוד כדי שיהיה ניתן לעריכה.
- מחק אותו או הזן מחרוזת טקסט חדשה.
- הקש על Enter.
- הקוד שונה כעת באופן זמני רק לטובתך.
למה תרצה להשתמש בתכונת Inspect Element?
היכולת לבדוק אלמנט מועילה מסיבות רבות.
- כדי לשנות קוד תוך כדי תנועה. מעצבי אתרים יכולים לשנות באופן זמני דברים באתר כדי לראות כיצד השינויים משפיעים על דברים.
- לבדיקת הקוד. גם מעצבים וגם אנשי שיווק יכולים לבדוק את הקוד כדי לאשר שיש שם דברים כמו פרטי Google Analytics.
- להצגת תמונות בנפרד מאתר. אם אתר כלשהו אינו מאפשר לך לפתוח תמונה בלשונית או בחלון חדש, הצפייה באלמנט מאפשרת זאת.
-
Tinker. לראות את הקוד של דף אינטרנט יכול לעזור לך להבין מה אתה רואה, ולהסיר את המסתורין של מה ולמה של מה קורה עם האתר שאתה נמצא בו. זה כמו לפרק מכשיר כדי לראות איך הוא עובד, אבל אין ברגים לאבד במקרה הזה.
שאלות נפוצות
האם זה חוקי לבדוק אתר?
כן. עם זאת, אם אתה מתכנן להשתמש בקוד או בנכסים כלשהם מאתר אינטרנט, הקפד לבדוק עם הבעלים ולהוסיף הערת זכויות יוצרים.
איך אני מעתיק HTML מאתר אינטרנט עם רכיב בדיקה?
ב-Chrome, לחץ לחיצה ימנית על הדף ובחר Inspect, ולאחר מכן עבור לחלק העליון ולחץ לחיצה ימנית על התג (למשל). בחר Copy > Copy outerHTML, ולאחר מכן הדבק את הקוד בקובץ טקסט או HTML.
האם אוכל להעתיק CSS מאתר עם רכיב בדיקה?
כן. לחץ לחיצה ימנית על הרכיב שברצונך להעתיק ובחר Inspect. לחץ לחיצה ימנית על הקוד המודגש ובחר Copy > Copy styles.
איך אני רואה את הסיסמאות השמורות שלי באמצעות רכיב בדיקה?
כדי לחשוף סיסמאות נסתרות, לחץ לחיצה ימנית על תיבת הטקסט של הסיסמה ובחר Inspect. בקטע המודגש, חפש את type=”password” והחלף את password ב- text. יש דרכים קלות יותר להציג את כל הסיסמאות שלך ב-Chrome.
