כיצד להשתמש בכלי “Inspect Element” של Firefox כדי לבחון אתר אינטרנט

Verwenden des Firefox-Tools "Inspect Element" zum Untersuchen einer Site
⏱️ 1 min read

אם אי פעם תהיתם איך בנויים אתרי האינטרנט המועדפים עליכם, שירותי “בדיקה” של דפדפן יכולים להיות ברכה נסתרת. כיסינו את הכלי “בדיקה” של Chrome ו-Firefox מגיע גם עם הצעה דומה.

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

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

יער אילנות (הארבורט...
יער אילנות (הארבורטום הלאומי)

הַתקָנָה

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

ההפצות העיקריות של לינוקס מגיעות ככל הנראה עם Firefox מותקן מראש או שיש להן עותקים של Firefox במרכז התוכנה/מאגרי החבילות שלהם שהמשתמש יכול להתקין בקלות.

פתיחת “בדוק אלמנט”

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

מְפַקֵחַ

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

בכל מקרה, האלמנט עליו לחצת יוצג באמצע הכלי, וכאשר תרחף מעל האלמנט הזה – כמו ה- <div> תג אני מרחף מעל התמונה למטה – ה”מפקח” ידגיש את האלמנט החזותי הזה על המסך שלך בדף האינטרנט עצמו.

כרטיסיית הבדיקה של Firefox Inspector

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

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

עורך סגנון

אתה יכול להמשיך את המסע שלך לתחום של גיליונות סגנונות מדורגים (CSS) על ידי מעקב אחר סרגל הכלים בראש המפקח. לחץ במקום שבו כתוב “עורך סגנונות” כדי לפתוח תיבת דו-שיח חדשה המציגה שלושה לוחות חדשים בתחתית המסך.

מדריך סגנונות מפקח פיירפוקס

כאן אתה יכול לראות את שני קבצי גיליון הסגנונות שבהם משתמשת DuckDuckGo, את האלמנטים של גיליון הסגנונות הראשון שנבחר ואת כללי ה-“@media” השונים באותו גיליון, השולטים בעיצוב רספונסיבי עבור מסכים קטנים וגדולים יותר.

אתה יכול לערוך את גיליונות הסגנונות האלה באותו אופן כמו בסעיף “מפקח”. במקרה זה, ישנם כללים רבים לבחירה – 1262 כללים בגיליון הסגנונות הראשון בלבד.

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

מדריך הרשת של Firefox Inspector

משחק

כאשר אתה פותח את הכרטיסייה “ביצועים”, תצטרך ללחוץ על כפתור “התחל להקליט ביצועים” כדי שהמפקח יאסוף מידע. תוך מספר שניות, הוא יגלה באילו פריימים לשנייה (FPS) הדף שלך פועל, אירועי Document Object Model (DOM) שהתרחשו וחישובי סגנון מחדש, יחד עם הזמן (בדרך כלל באלפיות שניות) לקח לרכיבים אלה לטעון. .

מדריך ביצועים של Firefox Inspector

עבור אתר זה, אתה יכול לראות את אירוע ה-DOM המודגש, מעבר עכבר, שלקח 6.03 אלפיות שניות לטעון. ה-FPS הממוצע עבור עמוד זה היה בסביבות 39. והגרף המציג את טווח זמני התגובה שלי הגיע ל-9,000 אלפיות השנייה עבור אירועים מסוימים.

זיכרון

בלשונית “זיכרון”, תצטרך גם ללחוץ על כפתור – “צלם תמונת מצב” – כדי לאסוף מידע. עבורי זה יצר מפת אירועים שמראה כ-600Kb של מחרוזות, 1Mb של אובייקטים ו-1Mb של סקריפטים שמוצאים את דרכם לזיכרון. אתה יכול לראות את אותם אלמנטים בכמה דרכים שונות על ידי לחיצה על התפריט הנפתח שבו כתוב “מפת עץ”, כפי שאתה יכול לראות בתמונה זו.

Firefox Inspector מדריך זיכרון

אִחסוּן

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

מדריך אחסון של Firefox Inspector

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

סיכום

יש הרבה מה לחקור בעת שימוש במפקח Firefox. ההקדמה הזו לחלקיו המרובים אמורה להעסיק אותך לזמן מה.

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

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

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

You may also like...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x