כיצד להשתמש ב- Inspect Element

רוב האנשים אינם מודעים לכך שעומד לרשותם אוצר של כלי מפתחים, ושהוא חבוי בדפדפן האהוב עליהם.

כל דפדפן אינטרנט מציע כלים למפתחים כדי לבדוק את הקידוד של אתר אינטרנט, עם זאת, זהו ישות זרה למשתמש האינטרנט הממוצע. אחרי הכל, מי רוצה להסתכל על הקידוד של אתר אינטרנט, נכון?

כפי שמתברר, יש הרבה דברים שאתה יכול ללמוד על ידי התבוננות בקידוד של אתר אינטרנט. המשך לקרוא כדי לגלות מה יש לתכונת רכיב הבדיקה להציע וכיצד להשתמש בה.

כיצד להשתמש ב-Inspect Element בדפדפן ספציפי

לרוב הדפדפנים יש כלים לבדיקת אלמנטים של אתר אינטרנט, אבל כולם בדרך כלל עובדים באותו אופן.

שימוש ב-Inspect Element ב-Google Chrome

1. פתח את האתר שאתה רוצה לבדוק.

   

2. לחץ לחיצה ימנית בכל מקום בדף ובחר לִבדוֹק.

   

   אוֹ

3. לחץ על שלוש הנקודות האנכיות בפינה הימנית של סרגל הכלים שלך.

   

4. לך ל כלים נוספים.

   

5. בחר כלים למפתחים.

   

   אוֹ

6. הקש על F12 מקש קיצור במקלדת במחשב או CMD + Options + I על מק.

שימוש ב-Inspect Element ב-Microsoft Edge

1. פתח אתר אינטרנט.

   

2. לחץ על שלוש הנקודות האנכיות בפינה השמאלית העליונה של סרגל הכלים של הדפדפן.
3. גלול למטה ולחץ על כלים נוספים.

   

4. לחץ על כלים למפתחים.

   

   אוֹ

5. לחץ לחיצה ימנית בכל מקום באתר.
6. לחץ על לִבדוֹק.

   

   אוֹ

7. ללחוץ Ctrl + Shift + I.

כל אחת משלוש השיטות הללו תיתן לך את אותה תוצאה.

אם עשית זאת נכון, תראה חלונית חדשה נפתחת בתחתית הדפדפן שלך. אלו הם כלי המפתחים וכוללים את הכרטיסייה אלמנטים. זה הכלי שאתה צריך כדי לבדוק את האלמנט.

החלונית תיפתח בתחתית המסך כברירת מחדל, אך תמיד תוכל לשנות את אופן מראהו. בצע את השלבים הפשוטים הבאים כדי לשנות את מיקומו של חלונית כלי המפתחים:

1. לחץ על שלוש הנקודות האנכיות בפינה העליונה של חלונית הכלים למפתחים.

   

2. בחר צד עגינה (משמאל, תחתון או ימין) או שחרר את העגינה לחלון נפרד.

   

ריחוף עם הסמן ליד קצה מסגרת החלונית 'כלי מפתחים' וגרירה יצמצם או ירחיב את סביבת העבודה. לדוגמה, אם תבחר לעגן את הפאנל לצד ימין של חלון הדפדפן, נסה לרחף על הגבול השמאלי. אתה יכול לגרור את החלונית כדי לשנות את גודלה כאשר אתה רואה את סמן החץ.

שימוש ב-Inspect Element (ספציפי למערכת ההפעלה)

למרות שהרבה מהשלבים המעורבים אולי כוסו רק על ידי הצגתך כיצד להשתמש ב-Inspect Element בדפדפן, היכן שהוא קיים מלכתחילה, אבל בכל מקרה נראה לך כיצד ברוב מערכת ההפעלה.

כיצד להשתמש ב-Inspect Element ב-Chromebook

דפדפן ברירת המחדל ב-Chromebook הוא Google, אז עקוב אחר ההוראות של דפדפן Chrome כדי לגשת בדוק את האלמנט. הנה קורס רענון קטן בשבילך:

1. פתח אתר אינטרנט.

   

2. לחץ על שלושת הקווים האנכיים בפינה הימנית העליונה של סרגל הכלים.

   

3. בחר כלים נוספים.

   

4. לחץ על כלים למפתחים.

   

אתה יכול גם להשתמש בשיטת הקליק הימני או F12 מקש פונקציה כדי להגיע אל כלי המפתחים מהר יותר.

כיצד להשתמש ב-Inspect Element במכשיר אנדרואיד

הפעלת Inspect Element במכשיר אנדרואיד שונה במקצת. בדוק כיצד להגיע לחלונית Inspect Element באנדרואיד:

1. הקש על F12 מקש פונקציה.
2. בחר החלף את סרגל ההתקנים.

   

3. בחר את מכשיר האנדרואיד מהתפריט הנפתח.

   

כשאתה בוחר מכשיר אנדרואיד ספציפי, תבחין כי גרסה ניידת של האתר נטענת. מכאן, אתה חופשי להשתמש בתכונת Inspect Element במכשיר האנדרואיד שלך מהנוחות של שולחן העבודה שלך.

שיטה זו פועלת הן עבור דפדפני כרום והן עבור דפדפני פיירפוקס מכיוון שיש להם תכונה בכלי המפתחים שלהם שנקראת Device Simulation.

זה גם עובד באותו אופן עבור מכשירי אייפון. אתה רק צריך לבחור את המתאים בתפריט הנפתח.

כיצד להשתמש ב-Inspect Element ב-Windows

הכלי Inspect Element אינו בהכרח ספציפי למערכת ההפעלה, אלא הוא ספציפי לדפדפן. זה אומר שכלי מפתחים הם תכונה של הדפדפן שבו אתה משתמש ולא בהכרח Windows. עם זאת, אתה יכול להגיע לחלונית Inspect Element ללא קשר לדפדפן שאתה מעדיף.

אם אתה משתמש במערכת ההפעלה של Windows, סביר להניח שתשתמש גם בדפדפן Microsoft Edge. בדוק כיצד לגשת ל-Inspect Element ב-MS Edge:

1. פתח את האתר שאתה רוצה לבדוק.

   

2. הקש על שלוש הנקודות האנכיות בפינת חלון הדפדפן.

   

3. גלול למטה ובחר כלים נוספים.

   

4. לחץ על כלים למפתחים.

   

אתה יכול גם להשתמש ב F12 מקש פונקציה אם ברצונך לגשת ל- Inspect Element מהר יותר. כמו כן, לחיצה ימנית על דף האינטרנט ובחירה בבדיקה פועלת גם כן.

כיצד להשתמש ב-Inspect Element ב-Mac

אם אתה משתמש ב-Mac, דפדפן הבחירה שלך הוא כנראה Safari. פתיחת Inspect Elements ב-Safari שונה במקצת מאשר ב-Chrome ו-Firefox. אבל זה פשוט באותה מידה עם השלבים הבאים:

1. פתח את דפדפן Safari.
2. לחץ על ספארי בלשונית הכותרת.
3. בחר העדפות מהתפריט הנפתח.
4. הקלק על ה מִתקַדֵם סמל גלגל השיניים הממוקם בחלק העליון של המסך.
5. סמן את התיבה שאומרת הצג את תפריט הפיתוח בשורת התפריטים.

מעבר שלבים אלה מאפשר את תכונת Inspect Element בדפדפן שלך. אם לא תפעיל את Inspect Element תחילה, לא תראה את האפשרות כשתפתח אתר אינטרנט.

לאחר השלמת שלב זה, פשוט לחץ לחיצה ימנית על כל דף אינטרנט פתוח ובחר בדוק. אתה יכול גם להשתמש בפקודת המקשים המהירים: CMD + אופציה + I (לִבדוֹק).

כיצד להשתמש ב-Inspect Element באייפון

האם ברצונך להשתמש בתכונה Inspect Elements כדי לראות כיצד גרסה ניידת של דף אינטרנט מופיעה באייפון? אתה יכול לעשות זאת ועוד בכמה צעדים פשוטים. אבל לפני שאתה מסתכל על אלמנט, אתה צריך להפעיל מפקח אינטרנט עבור מכשיר ה-iOS שלך:

1. לך ל הגדרות.

   

2. כעת, בחר ספארי.

   

3. גלול לתחתית והקש על תפריט מתקדם.

   

4. כעת, הקש על מתג ההחלפה כדי להפעיל מפקח אינטרנט.

   

כמו כן, עליך לוודא שתפריט הפיתוח מופעל ב-Mac שלך:

1. פתח את Safari.
2. בחר ספארי מהכותרות העליונות.
3. לאחר מכן, לחץ על העדפות.
4. לאחר מכן, לחץ על מִתקַדֵם.
5. סמן את התיבה שאומרת הצג את תפריט הפיתוח בשורת התפריטים.

לאחר הפעלת מכשיר iOS נייד ו-Mac, תראה את תפריט הפיתוח בסרגל העליון ב-Mac שלך. לחץ עליו כדי לראות את האייפון המחובר ואת דף האינטרנט הפעיל במכשיר. בחירה בדף האינטרנט פותחת גם חלון Web Inspector עבור אותו עמוד במסך ה-Mac שלך.

זכור, עם זאת, כי הנחיות אלה פועלות רק עבור Safari עם Mac, לא Safari ב-Windows.

כיצד להשתמש ב-Inspect Element ב-Google Forms

אתה יכול גם להשתמש ב-Inspect Element ב-Google Forms. עם זאת, אם אתה מחפש תשובות לחידון, אין לך מזל. לא תמצא את התשובות המוטמעות בקידוד. אתה יכול להציג תשובות רק אם אתה היוצר או העורך של הטופס. כך או כך, אם אתה סטודנט שענה על חידון ב-Google Forms, תראה רק את התשובות שלך.

1. אתה יכול ללחוץ לחיצה ימנית על הטופס ולבחור לִבדוֹק כדי לראות את כל הקוד של הטופס.

כיצד להשתמש ב-Inspect Element כאשר הוא חסום

מדי פעם, תגלה שאינך יכול לבדוק דף אינטרנט והבחירה בבדיקה מואפרת אם תנסה ללחוץ עליו באמצעות לחצן העכבר הימני. אתה אולי חושב שזה חסום, אבל ישנן דרכים רבות לעקוף את זה:

שיטה 1 - כבה את Javascript

1. להיכנס ל הגדרות.

   

2. לחפש "JavaScript”.

   

3. לכבות JavaScript.

   

שיטה 2 - גישה לכלי מפתחים לאורך הדרך

במקום ללחוץ לחיצה ימנית על העכבר כדי לבדוק, עשה זאת:

1. לך ל הגדרות בדפדפן שלך.

   

2. בחר כלים נוספים.

   

3. גלול למטה ולחץ על כלים למפתחים.

   

שיטה 3 - שימוש במקש הפונקציה

אתה יכול גם לנסות להשתמש ב F12 מקש פונקציה בדפי אינטרנט החוסמים את הקליק הימני עבור Inspect.

ייתכן שתצטרך לנסות את כל השיטות הללו לפני שתתקל באחת שמתאימה לך. כמוצא אחרון, אתה יכול גם לנסות להציג את קוד המקור על ידי הקלדה view-source: [הזן כתובת URL מלאה].

כיצד להשתמש ב-Inspect Element ב-Discord

בדיקת הקידוד שלך ב-Discord הוא תהליך קל. פשוט השתמש ב Ctrl + Shift + I פקודה או F12 מקש בדף דיסקורד.

כיצד להשתמש ב-Inspect Element ב-Chromebook של בית ספר

אם ה-Chromebook שלך הונפק על ידי בית ספר, השימוש בתכונת Inspect Element כרוך בכמה שלבים פשוטים:

1. לחץ לחיצה ימנית או הקשה בשתי אצבעות על דף האינטרנט ובחר לִבדוֹק.
2. ללחוץ Ctrl + Shift + I.
3. נסה להשתמש בשיטת view-source:[url], כגון "view-source://www.wikipedia.com", בלי המרכאות.

עם זאת, חלק מבתי ספר וארגונים חוסמים תכונה זו. לכן, אם זה לא עובד בשבילך, ייתכן שתצטרך ליצור קשר עם הארגון או מנהל בית הספר שלך.

כיצד להשתמש ב-Inspect Element כדי למצוא תשובות

אתה יכול להשתמש ב- Inspect Element כדי למצוא תשובות למגוון דברים כמו:

1. תצוגה מקדימה של עיצוב האתר במכשירים ניידים.
2. גלה מילות מפתח שהמתחרים משתמשים בהן.
3. מבחני מהירות.
4. שינוי טקסט בדף אינטרנט.
5. מצא דוגמאות מהירות כדי להראות למפתחים מה אתה צריך.

כשתפעיל את החלונית Inspect Element, תראה את כל הקידוד של האתר. זה כולל את כל קידוד JavaScript, CSS ו-HTML המובנה בו. זה כמו לראות את קידוד המקור של דף אינטרנט, אלא שאתה יכול לבצע שינויים בקוד. בנוסף, אתה יכול לראות כל שינוי מיושם בזמן אמת.

כלי זה הופך אותו לבלתי יסולא בפז עבור משווקים, מעצבים ומפתחים לצפות בשינויים בעיצוב לפני שמסיימים אותם. עם זאת, ביצוע שינויים בקידוד עם Inspect Element לא נמשך לנצח. כאשר אתה טוען מחדש את הדף, הוא יחזור למצב ברירת המחדל שלו.

שאלות נפוצות נוספות

כיצד אוכל להשתמש בפקודה Inspect Element כדי למצוא תשובות?

הדרך היחידה למצוא תשובות באמצעות התכונה Inspect Element היא אם האתר יחשוף אותה מיד לאחר ההגשה. במקרה זה, תשובות קיימות בקידוד.

אחרת, אתה פשוט מציג את הקידוד של החידון או המבחן כשאתה משתמש בתכונת Inspect Element, כמו גם את כל התשובות שאתה שולח.

האם בדיקת אלמנט אינה חוקית?

לא, הכלי Inspect Element אינו חוקי, הוא מיועד למפתחי אינטרנט. צפייה בקוד מקור של אתר אינטרנט אינה בלתי חוקית, היא הופכת לבעיה רק ​​אם אתה משתמש במידע שנאסף למטרות מרושעות, כגון ניסיון לנצל וכו'.

האם ניתן להשבית את רכיב הבדיקה בדפדפן?

התשובה הקצרה היא לא.

אינך יכול להשבית את ה-Inspect Element בדפדפן. אבל אתה יכול להגדיר פרמטרים שמונעים ממשתמשים לבצע פעולות מסוימות כמו לחיצה ימנית על דף אינטרנט. ישנם מדריכים רבים באינטרנט כדי להגדיר את הסקריפטים הנכונים להשבית אירועים מסוימים. עם זאת, אינך יכול למעשה להשבית את תכונת Inspect Element בשלמותה.

הכר את הצד הפנימי של דף אינטרנט

בדיקת תכונת Inspect Element של דף אינטרנט היא כנראה כלי מפתח שלא ידעת שאתה צריך - גם אם אינך מפתח בעצמך. יש לו טונות של יישומי עיצוב ושיווק שיכולים לגרום לאתר שלך לפעול בצורה חלקה יותר. ואולי לתת לך יתרון על מתחרה.

בשביל מה אתה משתמש ב-Inspect Element? ספר לנו על זה בקטע ההערות למטה.