החלונית 'שכבות': סייר בשכבות של האתר שלך

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

סקירה כללית

אפשר להשתמש בחלונית Layers כדי:

• הצגת שכבות של מסמכים.
• בדיקת שכבות המסמך.
• הגדרת נקודות עצירה לשינויים ב-DOM.
• הצגת המידע מהכלי לניתוח ביצועים (profiler) של המרת תמונה וקטורית למפת סיביות (painting).
• זיהוי רכיבים שגלילה שלהם איטית.

פתיחת החלונית 'שכבות'

כדי לפתוח את החלונית שכבות:

1. פותחים את כלי הפיתוח.
2. כדי לפתוח את תפריט הפקודות, לוחצים על:
   • macOS: Command+Shift+P
   • Windows , Linux ו-ChromeOS: Control+Shift+P
3. מתחילים להקליד Layers, בוחרים באפשרות Show Layers panel ומקישים על Enter.

לחלופין, בפינה השמאלית העליונה בוחרים באפשרות more_vert אפשרויות נוספות > כלים נוספים > החלונית 'שכבות'.

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

הצגת שכבות של מסמכים

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

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

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

בדיקת שכבות המסמך

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

בהתאם לשכבה, יופיע המידע הבא:

• גודל
• סיבות לאיחוד
• הערכת זיכרון
• מספר הצבעים
• אזורים בגלילה איטית
• מגבלה על מיקום קבוע

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

כדי להזיז את התרשים:

• משתמשים ב-WASD כדי להזיז את הדיאגרמה. מקישים על W כדי להזיז את התצוגה למעלה, על A כדי להזיז אותה שמאלה, על S כדי להזיז אותה למטה ועל D כדי להזיז אותה ימינה.
• לוחצים על סמל מצב ההחלקה drag_pan או מקישים על X וגוררים כדי לזוז לאורך צירי X ו-Y.
• לוחצים על מצב הסיבוב 360 או על V וגוררים כדי לסובב לאורך ציר Z.
• לוחצים על 'איפוס טרנספורמציה' zoom_in_map או מקישים על 0 כדי לאפס את התרשים למיקום המקורי שלו.
• כדי להתקרב, מקישים על shift + + או על גלגל העכבר למעלה.
• כדי להקטין את התצוגה, מקישים על Shift + - או על גלגל העכבר למטה.

כדי לראות את רכיב ה-DOM התואם של שכבה בחלונית הרכיבים, לוחצים לחיצה ימנית על שכבה בתרשים או בעץ השכבות ואז לוחצים על הצגה בחלונית הרכיבים.

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

הגדרת נקודות עצירה לשינוי DOM

בחלונית Layers אפשר להגדיר נקודות עצירה לשינויים ב-DOM.

כדי להגדיר נקודת עצירה לשינוי ב-DOM:

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

רשימה של נקודות עצירה לשינויים ב-DOM מופיעה ב:

• הכרטיסייה Elements (רכיבים) > DOM Breakpoints (נקודות עצירה ב-DOM).
• Sources > הקטע DOM Breakpoints מתכווץ.

מידע נוסף על סוגי נקודות העצירה זמין במאמר סוגי נקודות עצירה לשינויים ב-DOM.

הצגת מידע על הכלי לניתוח צבעים

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

כדי להפעיל את Paint Profiler, פועלים לפי השלבים הבאים:

1. מסמנים את התיבה Paints (צבעים) בcheck_box (תיבת הסימון) בסרגל הפעולות.
2. בוחרים שכבה מעץ השכבות.
3. לוחצים על Paint Profiler (כלי לניתוחי זמן עיבוד) בתחתית החלונית Details (פרטים). חשוב לזכור שלא כל השכבות יכללו את האפשרות הזו.

הכרטיסייה Profiler תיפתח עם רשומות של צבע והיסטוגרמה שמייצגת התפלגות עלויות של צבע.

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

זיהוי רכיבים של גלילה איטית

אתרים מסוימים משתמשים ב-JavaScript כדי לזהות אירועי גלילה או מגע ברכיבים באופן שעלול להשפיע לרעה על מהירויות הגלילה. כדי לזהות שכבות שמכילות פונקציות event listener שקשורות לגלילה שעשויות לפגוע בביצועים, לוחצים על תיבת הסימון check_box Slow scroll rects.

שכבות שעלולות לגרום לגלילה איטית מודגשות בוורוד.