پنل لایه ها: لایه های وب سایت خود را کاوش کنید

Dale St. Marthe

پنل لایه ها به شما کمک می کند ترکیب وب سایت خود را درک کنید و چگونه مرورگر محتوا را ارائه می دهد. نمودار سه بعدی وب سایت خود را برای شناسایی مشکلات رندرینگ، رفع اشکالات اسکرول و بهینه سازی انیمیشن ها تجزیه و تحلیل کنید.

نمای کلی

از پنل لایه ها برای انجام کارهای زیر استفاده کنید:

• مشاهده لایه های سند
• لایه های سند را بررسی کنید.
• نقاط شکست تغییر DOM را تنظیم کنید.
• مشاهده اطلاعات Paint Profiler.
• عناصر اسکرول آهسته را شناسایی کنید.

پنل لایه ها را باز کنید

برای باز کردن پنل لایه ها ، مراحل زیر را دنبال کنید:

1. DevTools را باز کنید .
2. منوی Command را با فشار دادن:
   • macOS: Command + Shift + P
   • Windows، Linux، ChromeOS: Control + Shift + P
3. شروع به تایپ Layers کنید، نمایش پانل لایه ها را انتخاب کنید و Enter را فشار دهید.

از طرف دیگر، در گوشه بالا سمت راست، more_vert گزینه‌های بیشتر > ابزارهای بیشتر > پانل لایه‌ها را انتخاب کنید.

علاوه بر این، پنل Performance به شما امکان می‌دهد لایه‌های هر فریم ضبط را در یک برگه لایه‌ها مشاهده کنید. برای کسب اطلاعات بیشتر، مشاهده اطلاعات لایه‌ها را ببینید.

مشاهده لایه های سند

قسمت سمت چپ پانل لایه ها همه لایه های رندر شده سند را در یک درخت قابل گسترش فهرست می کند. این درخت با پیمایش در صفحه به روز می شود. لایه ها یا با انتخابگر CSS یا با یک عدد مشخص می شوند و سپس ابعاد لایه بر حسب پیکسل مشخص می شوند.

ماوس را روی یک لایه نگه دارید تا آن را در صفحه وب و در نمودار برجسته کنید. یک راهنمای ابزار با اطلاعات زیر در صفحه ظاهر می شود:

• انتخابگرهای لایه
• ابعاد لایه، بر حسب پیکسل.
• نمادی که شبکه یا انعطاف پذیر CSS را نشان می دهد، در صورت لزوم.

لایه های سند را بررسی کنید

برای مشاهده اطلاعات بیشتر در بخش جزئیات ، روی یک لایه کلیک کنید.

بسته به لایه، اطلاعات زیر ظاهر می شود:

• اندازه
• دلایل ترکیبی
• تخمین حافظه
• تعداد رنگ
• مناطق اسکرول آهسته
• محدودیت موقعیت چسبنده

نمودار نشان می دهد که چگونه لایه ها برای این صفحه روی هم چیده شده و چیده شده اند، از جمله عناصری که در خارج از viewport قرار گرفته اند.

برای جابجایی نمودار:

• برای جابجایی نمودار از WASD استفاده کنید. W را برای حرکت به سمت بالا، A را برای حرکت به سمت چپ، S را برای حرکت به پایین و D را برای حرکت به سمت راست فشار دهید.
• روی Pan Mode drag_pan یا X را فشار دهید و بکشید تا در امتداد محورهای X و Y حرکت کنید.
• روی Rotate Mode 360 ​​کلیک کنید یا V را فشار دهید و بکشید تا در امتداد محور Z بچرخد.
• روی Reset Transform zoom_in_map کلیک کنید یا 0 را فشار دهید تا نمودار به موقعیت اصلی خود بازنشانی شود.
• با فشار دادن shift + + یا چرخ ماوس به سمت بالا بزرگنمایی کنید.
• با فشار دادن shift + - یا چرخ ماوس به سمت پایین، بزرگنمایی کنید.

برای دیدن عنصر DOM مربوطه یک لایه در پانل Elements ، روی یک لایه در نمودار یا درخت لایه کلیک راست کرده و روی Reveal در پانل Elements کلیک کنید.

علاوه بر این، پنل لایه‌ها لایه‌های خاصی را که میزبان یا ترسیم محتوا نیستند، پنهان می‌کند. برای نمایش این لایه ها، روی درخت لایه کلیک راست کرده و Show inside layers را انتخاب کنید.

نقاط شکست تغییر DOM را تنظیم کنید

پانل لایه ها به شما امکان می دهد نقاط شکست تغییر DOM را تنظیم کنید.

برای تنظیم نقطه شکست تغییر DOM، این مراحل را دنبال کنید:

1. روی یک لایه در درخت لایه کلیک راست کنید.
2. ماوس را روی Break قرار دهید و سپس اصلاحات زیر درخت ، تغییرات ویژگی یا حذف گره را انتخاب کنید.

لیستی از نقاط شکست تغییر DOM را در:

• عناصر > برگه DOM Breakpoints .
• منابع > بخش قابل جمع شدن DOM Breakpoints .

برای اطلاعات بیشتر در مورد انواع نقاط شکست، به انواع نقاط شکست تغییر DOM مراجعه کنید.

مشاهده اطلاعات Paint Profiler

پنل لایه‌ها به شما امکان می‌دهد اطلاعات دقیق رنگ در مورد یک لایه را مشاهده کنید و محتوای صفحه وب را در نمودار سه‌بعدی نمایش دهید.

برای فعال کردن Paint Profiler مراحل زیر را دنبال کنید:

1. تیک چک_باکس Paints را در نوار اقدام علامت بزنید.
2. یک لایه از درخت لایه انتخاب کنید.
3. روی Paint Profiler در پایین صفحه جزئیات کلیک کنید. توجه داشته باشید که همه لایه ها این گزینه را ندارند.

برگه Profiler با رکوردهای رنگ و یک هیستوگرام باز می شود که توزیع هزینه رنگ را نشان می دهد.

فعال کردن Paints همچنین بیشتر محتوای صفحه وب را بر روی نمودار نمایش می دهد.

عناصر اسکرول آهسته را شناسایی کنید

برخی از وب‌سایت‌ها از جاوا اسکریپت برای شناسایی رویدادهای اسکرول یا لمس روی عناصر استفاده می‌کنند به نحوی که ممکن است بر سرعت پیمایش تأثیر منفی بگذارد. برای شناسایی لایه‌هایی که حاوی شنونده‌های رویداد مرتبط با پیمایش هستند که ممکن است عملکرد را مختل کنند، روی کادر تأیید Slow scroll rects کلیک کنید.

لایه هایی که ممکن است باعث کندی پیمایش شوند با رنگ صورتی برجسته می شوند.