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

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 واسحب للتدوير على طول محور Z.
• انقر على إعادة التحويل zoom_in_map أو اضغط على 0 لإعادة الرسم البياني إلى موضعه الأصلي.
• يمكنك التكبير عن طريق الضغط على Shift + + أو عجلة الماوس للأعلى.
• يمكنك التصغير بالضغط على Shift + - أو عجلة الماوس للأسفل.

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

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

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

تتيح لك لوحة الطبقات ضبط نقاط إيقاف تغيير DOM.

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

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

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

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

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

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

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

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

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

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

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

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

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

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