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

Dale St. Marthe
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 (หากมี)

เคล็ดลับเครื่องมือในแบนเนอร์ web.dev

ตรวจสอบเลเยอร์เอกสาร

คลิกเลเยอร์เพื่อดูข้อมูลเพิ่มเติมในแผงรายละเอียด

แท็บรายละเอียด

ข้อมูลต่อไปนี้จะปรากฏขึ้น ทั้งนี้ขึ้นอยู่กับเลเยอร์นั้นๆ

  • ขนาด
  • เหตุผลของการประกอบ
  • หน่วยความจําโดยประมาณ
  • จำนวนการแสดงผล
  • ภูมิภาคที่มีการเลื่อนช้า
  • ข้อจำกัดของตำแหน่งติดหนึบ

แผนภาพแสดงวิธีซ้อนและจัดเรียงเลเยอร์สําหรับหน้านี้ รวมถึงองค์ประกอบที่วางอยู่นอกวิวพอร์ต

แผนภาพแผงเลเยอร์

วิธีย้ายแผนภาพ

  • ใช้ 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

เลเยอร์การเลื่อนช้าในแผนภาพ

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