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

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

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