لوحة "الطبقات": استكشاف طبقات موقعك الإلكتروني

Dale St. Marthe

تساعدك لوحة الطبقات في فهم تركيبة موقعك الإلكتروني وكيفية عرض المتصفّح للمحتوى. حلِّل مخطّطًا ثلاثي الأبعاد لموقعك الإلكتروني لتحديد مشاكل العرض وإصلاح الأخطاء المتعلّقة بالتمرير وتحسين الصور المتحركة.

نظرة عامة

استخدم لوحة الطبقات لإجراء ما يلي:

• عرض طبقات المستند
• فحص طبقات المستند
• اضبط نقاط الفواصل لتغييرات نموذج DOM.
• عرض معلومات أداة تحليل عرض محتوى الصفحة
• تحديد العناصر التي تستغرق وقتًا طويلاً في الانتقال إلى الأسفل

افتح لوحة "الطبقات".

لفتح لوحة الطبقات، اتّبِع الخطوات التالية:

1. افتح أدوات مطوري البرامج.
2. افتح قائمة الأوامر من خلال الضغط على:
   • نظام التشغيل macOS: ‏ Command+Shift+P
   • نظام التشغيل Windows وLinux وChromeOS: Control+Shift+P
3. ابدأ بكتابة Layers، ثم اختَر عرض لوحة الطبقات واضغط على Enter.

بدلاً من ذلك، في أعلى يسار الصفحة، انقر على more_vert المزيد من الخيارات > المزيد من الأدوات > لوحة الطبقات.

إضافةً إلى ذلك، تتيح لك لوحة الأداء عرض طبقات كل إطار من التسجيل في علامة التبويب الطبقات. لمزيد من المعلومات، يُرجى الاطّلاع على عرض معلومات الطبقات.

عرض طبقات المستند

يسرد القسم الأيمن من لوحة الطبقات جميع الطبقات المعروضة للمستند في شجرة قابلة للتوسيع. يتم تعديل هذه الشجرة أثناء التنقّل في الصفحة. يتم تحديد الطبقات إما باستخدام أداة اختيار لغة CSS أو باستخدام رقم، متبوعًا بأبعاد الطبقة بالبكسل.

مرِّر مؤشّر الماوس فوق طبقة لتمييزها في صفحة الويب والمخطّط البياني. سيظهر تلميح على الصفحة يحتوي على المعلومات التالية:

• أدوات اختيار الطبقة
• سمات الطبقة، بالبكسل
• رمز يمثّل شبكة CSS أو CSS Flex، حيثما ينطبق ذلك

فحص طبقات المستند

انقر على طبقة لعرض مزيد من المعلومات في لوحة التفاصيل.

استنادًا إلى الطبقة، ستظهر المعلومات التالية:

• الحجم
• أسباب التركيب
• تقدير الذاكرة
• عدد عمليات عرض المحتوى
• مناطق التمرير البطيء
• قيود الموضع الثابت

يوضح المخطّط كيفية تكديس الطبقات وترتيبها لهذه الصفحة، بما في ذلك العناصر التي يتم وضعها خارج إطار العرض.

لنقل المخطّط البياني:

• استخدِم WASD لتحريك الرسم البياني. اضغط على W للتدوير للأعلى، وعلى A للتدوير لليسار، وعلى S للتدوير للأسفل، وعلى D للتدوير لليسار.
• انقر على وضع "التدوير" drag_pan أو اضغط على X واسحب للتحرك على طول محورَي X وY.
• انقر على رمز التدوير 360 أو اضغط على V واسحب للتدوير على طول المحور "ع".
• انقر على إعادة التحويل zoom_in_map أو اضغط على 0 لإعادة الرسم البياني إلى موضعه الأصلي.
• يمكنك التكبير عن طريق الضغط على Shift + + أو عجلة الماوس للأعلى.
• يمكنك التصغير عن طريق الضغط على Shift + - أو عجلة الماوس للأسفل.

للاطّلاع على عنصر نموذج DOM المقابل للّوحة في لوحة "العناصر"، انقر بزر الماوس الأيمن على طبقة في الرسم البياني أو في شجرة الطبقات، ثمّ انقر على كشف في لوحة "العناصر".

بالإضافة إلى ذلك، تخفي لوحة الطبقات طبقات معيّنة لا تستضيف المحتوى أو ترسمه. لعرض هذه الطبقات، انقر بزر الماوس الأيمن على العرض التدرّجي للطبقات واختَر عرض الطبقات الداخلية.

ضبط نقاط إيقاف تغيير DOM

تتيح لك لوحة الطبقات ضبط نقاط توقّف تغيير نموذج DOM.

لضبط نقطة توقّف لتغيير نموذج DOM، اتّبِع الخطوات التالية:

1. انقر بزر الماوس الأيمن على طبقة في شجرة الطبقات.
2. مرِّر مؤشر الماوس فوق الفاصل عند، ثم اختَر تعديلات الشجرة الفرعية أو تعديلات السمات أو إزالة العقدة.

يمكنك العثور على قائمة بنقاط التوقف لتغييرات نموذج DOM في:

• العناصر > علامة التبويب نقاط DOM الفاصلة
• المصادر > قسم نقاط DOM الفاصلة القابل للطي

لمزيد من المعلومات عن أنواع نقاط الإيقاف، اطّلِع على أنواع نقاط الإيقاف لتغييرات DOM.

عرض معلومات أداة تحليل عرض محتوى الصفحة

تتيح لك لوحة الطبقات عرض معلومات تفصيلية عن الطلاء في إحدى الطبقات، وعرض محتوى صفحة الويب على الرسم البياني الثلاثي الأبعاد.

لتفعيل أداة تحليل إعدادات الطلاء، يمكنك اتّباع الخطوات التالية:

1. ضَع علامة في مربّع الاختيار check_box Paints في شريط الإجراءات.
2. حدد طبقة من شجرة الطبقات.
3. انقر على أداة تحليل أداء الطلاء في أسفل لوحة التفاصيل. لاحظ أن هذا الخيار لن يكون في كل الطبقات.

ستفتح علامة التبويب أداة تحليل الأداء مع سجلّات الطلاء ومدرج تكراري يمثّل توزيع تكلفة الطلاء.

سيؤدي تفعيل اللوحات أيضًا إلى عرض معظم محتوى صفحة الويب على المخطّط البياني.

تحديد عناصر التمرير البطيء

تستخدم بعض المواقع الإلكترونية JavaScript لرصد أحداث التمرير أو اللمس على العناصر بطريقة قد تؤثر سلبًا في سرعات التمرير. لتحديد الطبقات التي تحتوي على أدوات معالجة أحداث ذات صلة بميزة الانتقال للأعلى أو للأسفل والتي قد تؤدي إلى إبطاء الأداء، انقر على مربّع الاختيار check_box Slow scroll rects (المستطيلات ذات الانتقال البطيء للأعلى أو للأسفل).

يتم تمييز الطبقات التي قد تؤدي إلى بطء الانتقال للأعلى أو للأسفل باللون الوردي.