מפתחים ומעצבי ממשק משתמש משתמשים בתכונת Inspect Element כדי לשנות אתרים באינטרנט מבלי לשנות את קוד המקור. אבל איך לבדוק אלמנטים מבלי לעבור קורס פיתוח אתרים?
Inspect Element הוא כלי מפתח שימושי שיוצא מהקופסה עם דפדפני אינטרנט פופולריים. אתה רק צריך לדעת איך לפרוס את הכלי בכמה קליקים תוך כדי גלישה באתרים.
אתה יכול לעשות קסמים רבים כמו שינוי פריסת האתר, צילום מסך ללא טקסט, שינוי גופנים, שינוי מספרים ועוד.
מצא להלן מדריך תמציתי שלב אחר שלב כדי ללמוד כיצד לבדוק אלמנטים ללא מאמץ.
מה זה Inspect Element?
Inspect Element הוא כלי לפיתוח אתרים הזמין ברוב דפדפני האינטרנט. אתה יכול להשתמש בו כדי לערוך את קוד המקור הקדמי של כל אתר שאתה מבקר בו.
השינויים שאתה מבצע מתרחשים בתוך ארגז חול בתוך דפדפן האינטרנט שלך. אז, אתה לא מבצע שום שינויים באתר האינטרנט בפועל. כמו כן, השינויים השטחיים שאתה מבצע נעלמים כאשר אתה מרענן את הדף.
הנה כמה דרכים יצירתיות להשתמש בו:
- אתה צריך לצלם צילום מסך מאתר, והטקסטים בתמונה מטרידים אותך. השתמש בכלי Inspect Element כדי למחוק את הטקסטים האלה.
- אתה רוצה לעשות קונדס לחברים שלך על ידי הצגת שמך בניו יורק טיימס או בוושינגטון פוסט. Inspect Element היא הדרך הטובה ביותר לעשות זאת.
- בדוק קודי ניפוי באגים באתרי אינטרנט על ידי החלתם בזמן אמת באמצעות כלי Inspect Element. אם זה עובד, אתה יכול לשנות את קוד המקור האחורי.
- כמשווק דיגיטלי, אתה יכול לחשוף את מילות המפתח של המתחרים, כותרות SEO, מטא תגיות וכו', באמצעות כלי פיתוח אתרים אדיר זה.
כיצד לבדוק אלמנטים ב-Windows
השימוש בכלי Inspect Element ב-Windows הוא קל עד כדי גיחוך. מצא להלן מדריך שלב לבדיקת אלמנטים באמצעות דפדפני אינטרנט שונים ב-Windows:
Google Chrome Inspect Tool
- כשמשתמש גוגל כרום, מקש ימני בכל מקום באתר.
- תפריט ההקשר בלחיצה ימנית יופיע.
- בתחתית, תראה לִבדוֹק.
- נְקִישָׁה לִבדוֹק כדי להציג את קודי HTML ו-CSS ב-a לוח צד ימין.
כיצד אוכל לפתוח את Inspect Element ב-Chrome ללא לחיצה ימנית?
ישנם כמה קיצורי דרך שימושיים לפתיחת כלי Inspect Element ב-Google Chrome עבור Windows. מקשים חמים אלה הם כדלקמן:
- Ctrl + מִשׁמֶרֶת + ג
- מקש הפונקציה F12
מקשי הקיצור לעיל פועלים גם בדפדפן Mozilla עבור Windows.
כלי המפקח של מוזילה
בדפדפן Mozilla, התהליך זהה ל-Google Chrome. אולם, ה מְפַקֵחַ חלון יופיע בתחתית הדפדפן במקום בצד ימין, כמו ב-Google Chrome.
Microsoft Edge Inspect Tool
באופן מפתיע, Inspect Element של Microsoft Edge פועל בדומה לדפדפן Google Chrome. הכלי Inspect זמין בלחיצה ימנית. כמו כן, קודי HTML ו-CSS מופיעים בצד ימין, בדומה ל-Google Chrome.
כיצד לבדוק אלמנטים ב-Mac
האם אתה משתמש ב-Google Chrome, Mozilla Firefox או Microsoft Edge במחשבי ה-Mac של אפל? אם כן, אז אתה יכול לפרוס את כלי Inspect Element על ידי ביצוע השלבים שהוזכרו לעיל בסעיף Windows.
אבל, אם אתה משתמש בדפדפן macOS ברירת המחדל, Safari, אז השימוש בכלי Inspect Element הוא משחק מסובך. כברירת מחדל, Safari לא מציג את Inspect Element ב-Mac. הנה מה שאתה צריך לעשות:
כיצד לפתוח את Inspect Element ב-Mac
ראשית, עליך להפעיל כלי מפתחים ב-Safari ב-Mac. כך:
- לָרוּץ ה דפדפן ספארי.
- בקר באתר שבו אתה רוצה לבדוק רכיבי אינטרנט.
- בחר ספארי מסרגל התפריטים העליון של דפדפן Safari.
- נְקִישָׁה העדפות מתפריט ההקשר שנפתח.
- על מסך העדפות, בחר מִתקַדֵם.
- סמן את ה- הצג פיתוח התפריט בתחתית ה העדפות מתקדמות מָסָך.
הפעלת בהצלחה כלי מפתח ב-Safari עבור Mac. כעת, בצע את השלבים הבאים כדי להשתמש ב- Inspect Element:
- בכל רכיב של אתר אינטרנט כמו טקסט או תמונה, מקש ימני.
- יופיע תפריט הקשר. בתחתית, תראה בדוק את האלמנט.
- לחץ על זה כדי לפתוח קטע ניפוי באגים מתחת לאתר המציג HTML ו CSS קודים.
מהם המפתחות ל-Inspect Element?
ייתכן שאתה מחפש קיצורי דרך עבור Inspect Element ב-Mac. אתה יכול להשתמש בדברים הבאים:
- פקודה + מִשׁמֶרֶת + ג
- הקש על לִשְׁלוֹט מקש ולאחר מכן בחר אלמנט כלשהו.
- לחץ על משטח העקיבה בשתי אצבעות
כיצד לבדוק אלמנטים ב-Chromebooks
Chromebook משתמש ב-Google Chrome בתור דפדפן ברירת המחדל. לפיכך, לאחר פתיחת אתר כלשהו, פשוט לחץ לחיצה ימנית כדי למצוא את האפשרות Inspect Element בתפריט ההקשר שלאחר מכן.
אם אתה משתמש ב-Chromebook מהעבודה או מבית הספר, ייתכן שאתה שואל את השאלה הבאה:
למה אני לא יכול לבדוק ב-Chromebook של בית הספר שלי?
רוב מנהלי בתי הספר והעסקים משביתים תכונות מתקדמות ב-Chromebook שהם מספקים לך לעבודה או ללימודים. מכיוון שכלי מפתחים הם תכונות מתקדמות, רוב הסיכויים שבבית הספר או העבודה שלך Chromebook לא יציג את הכלי Inspect Element.
כיצד לבדוק אלמנטים באייפד/אייפון
למרבה הצער, אינך יכול להשתמש בכלי Inspect Element באייפון או אייפד ללא מק.
ל-iOS ול-iPadOS יש Web Inspector עבור אפליקציית Safari. עם זאת, זה עובד רק אם אתה מחבר את המכשיר הנייד למק שבו כבר הפעלת כלי מפתח עבור Safari. להלן השלבים שתוכל לנסות:
- פתח את האייפד/אייפון הגדרות אפליקציה.
- נְקִישָׁה ספארי בחלונית הניווט בצד שמאל.
- לאחר מכן, גלול למטה בצד ימין כדי למצוא ולבחור מִתקַדֵם.
- הפעל את המתג עבור מפקח אינטרנט.
- כעת, חבר את המכשיר הנייד ל-Mac באמצעות יו אס בי.
- אשר את האייפון/אייפד ב-Mac.
- פתח כל אתר במכשיר נייד ב-Safari.
- כעת, הפעל את Safari ב-Mac ובחר לְפַתֵחַ בשורת התפריטים העליונה.
- בתפריט ההקשר שנפתח, חפש את שם המכשיר הנייד שלך.
- העבר את הסמן מעל המכשיר הנייד כדי להציג את כל האתרים הפתוחים.
- כעת, בחר אתר כלשהו כדי להציג את קוד המקור של HTML ו-CSS בדפדפן Safari של Mac.
סיכום
בדקתם את כל הדרכים האפשריות להשתמש בכלי Inspect Element לעריכה זמנית של דפי אינטרנט. למדת גם כיצד לבדוק רכיבים עבור מכשירים שונים כמו Mac, Windows, Chromebook, iPad ו-iPhone.
בפעם הבאה שתצטרך לשנות דף אינטרנט בשביל הכיף או לצרכים מקצועיים, נסה את השיטות האלה. אתה בהחלט תאהב את השלבים הבלתי מתאמצים האלה על פני שיטות מסובכות אחרות שהוסברו במקומות אחרים.
אל תשכח להשאיר הערות למטה אם השלבים שלמעלה עזרו לך, כל שיטה שאתה מוצא מאתגרת, או כל טיפים סודיים לגבי הכלי Inspect Element.
זקוק לדף אינטרנט כהפניה מודפסת? למד איך ל שמור במהירות דף אינטרנט כקובץ PDF עַכשָׁיו!