แผงเลเยอร์: สำรวจเลเยอร์ของเว็บไซต์

Dale St. Marthe

แผงเลเยอร์ช่วยให้คุณเข้าใจองค์ประกอบของเว็บไซต์และวิธีที่เบราว์เซอร์แสดงผลเนื้อหา วิเคราะห์แผนภาพ 3 มิติของเว็บไซต์เพื่อระบุปัญหาการแสดงผล แก้ไขข้อบกพร่องในการเลื่อน และเพิ่มประสิทธิภาพภาพเคลื่อนไหว

ภาพรวม

ใช้แผงเลเยอร์เพื่อทำสิ่งต่อไปนี้

• ดูเลเยอร์เอกสาร
• ตรวจสอบเลเยอร์เอกสาร
• ตั้งค่าเบรกพอยต์การเปลี่ยนแปลง DOM
• ดูข้อมูลเครื่องมือสร้างโปรไฟล์การแสดงผล
• ระบุองค์ประกอบที่เลื่อนช้า

เปิดแผงเลเยอร์

หากต้องการเปิดแผงเลเยอร์ ให้ทำตามขั้นตอนต่อไปนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. เปิดเมนูคำสั่งโดยกดแป้นต่อไปนี้
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. เริ่มพิมพ์ Layers เลือกแสดงแผงเลเยอร์ แล้วกด Enter

หรือที่มุมขวาบน ให้เลือก more_vert ตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > แผงเลเยอร์

นอกจากนี้ แผงประสิทธิภาพยังให้คุณดูเลเยอร์ของเฟรมแต่ละเฟรมของไฟล์บันทึกได้ในแท็บเลเยอร์ ดูข้อมูลเพิ่มเติมได้ที่ดูข้อมูลเลเยอร์

ดูเลเยอร์เอกสาร

ส่วนด้านซ้ายสุดของแผงเลเยอร์จะแสดงเลเยอร์ทั้งหมดที่ผ่านการจัดการแสดงผลของเอกสารในต้นไม้ที่ขยายได้ แผนภูมินี้จะอัปเดตขณะที่คุณไปยังส่วนต่างๆ ของหน้า เลเยอร์จะระบุด้วยตัวเลือก 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

ดูข้อมูลเครื่องมือสร้างโปรไฟล์การแสดงผล

แผงเลเยอร์ช่วยให้คุณดูข้อมูลการวาดโดยละเอียดเกี่ยวกับเลเยอร์ และแสดงผลเนื้อหาของหน้าเว็บในแผนภาพ 3 มิติได้

หากต้องการเปิดใช้งาน Paint Profiler ให้ทำตามขั้นตอนต่อไปนี้

1. เลือกช่องทําเครื่องหมาย check_box Paints ในแถบการดำเนินการ
2. เลือกเลเยอร์จากลําดับชั้นเลเยอร์
3. คลิกเครื่องมือวิเคราะห์ภาพที่ด้านล่างของแผงรายละเอียด โปรดทราบว่าเลเยอร์บางเลเยอร์จะไม่มีตัวเลือกนี้

แท็บเครื่องมือวิเคราะห์จะเปิดขึ้นพร้อมบันทึกสีและฮิสโตแกรมที่แสดงการแจกแจงต้นทุนสี

การเปิดใช้งานสีจะแสดงผลเนื้อหาส่วนใหญ่ของหน้าเว็บในแผนภาพด้วย

ระบุองค์ประกอบที่เลื่อนช้า

บางเว็บไซต์ใช้ JavaScript เพื่อตรวจหาเหตุการณ์การเลื่อนหรือการสัมผัสบนองค์ประกอบในลักษณะที่อาจส่งผลเสียต่อความเร็วในการเลื่อน หากต้องการระบุเลเยอร์ที่มี Listener เหตุการณ์ที่เกี่ยวข้องกับการเลื่อนซึ่งอาจส่งผลเสียต่อประสิทธิภาพ ให้คลิกช่องทําเครื่องหมาย check_box Slow scroll rects

ระบบจะไฮไลต์เลเยอร์ที่อาจทําให้เลื่อนช้าเป็นสีชมพู