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

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

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

הַתקָנָה

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

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

פתיחת "בדיקת אלמנט"

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

מְפַקֵחַ

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

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

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

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

עורך סגנון

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

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

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

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

ביצועים

כשתפתח את הכרטיסייה "ביצועים", יהיה עליך ללחוץ על הלחצן "התחל הקלטה של ​​ביצועים" כדי שהמפקח יאסוף מידע. בתוך שניות ספורות הוא יגלה את המסגרות לשנייה (FPS) שהדף שלך פועל, באירועים של אובייקט אובייקט מסמך (DOM) שהתרחשו, וחישובי סגנון, לצד הזמן (בדרך כלל במילי-שניות), שלקח אותם לִטעוֹן.

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

זיכרון

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

אִחסוּן

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

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

סיכום

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

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

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

קרדיט תמונה: דף הבית של קוונטית פיירפוקס על ידי DepositPhotos