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

גישה אל כלי הבדיקה

הכלי 'בדוק' נמצא בתפריט ההקשר של Chrome.

לחץ לחיצה ימנית על כל רכיב בדפדפן שלך ולחץ על "בדוק" בתפריט ההקשר.

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

יש כאן הרבה, אז בואו נבדוק את הקטעים האישיים.

בדיקת המפקח

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

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

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

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

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

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

תצוגת HTML

רוב הכרטיסייה DevTools תפוסה בחלונית HTML.

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

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

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

תוכלו גם להבחין בשורת תפריטים קטנה בתחתית חלונית ה- HTML.

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

סגנונות

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

תוכל להחליף כלל ולכבות אותו על ידי העברת העכבר מעליה ולחיצה על תיבת הסימון שלצידה.

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

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

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

דגם Box וסגנון ממוחשב

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

במקרה זה אני יכול לראות אלמנט שלי יש גודל ראשוני של 461 x 209 פיקסלים. הוא אינו מכיל כל שוליים, גבולות או ריפודים, ולכן תיבות אלה ריקות.

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

ניתן גם לראות מודל באתרה באתרה אם העכבר מעל אלמנטים DOM עם הכלי אלמנט בדיקה מופעלת.

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

לבסוף, ניתן לחפש כללים מסוימים על ידי הקלדת התיבה מסנן.

סיכום

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