ภาพรวมของแท็บการแสดงผล

Sofia Emelianova
Sofia Emelianova

ดูคอลเล็กชันตัวเลือกที่ส่งผลต่อการเรนเดอร์เนื้อหาเว็บด้วยภาพรวมฟีเจอร์แท็บการแสดงผลในเครื่องมือสําหรับนักพัฒนาเว็บ

ภาพรวม

แท็บการแสดงผลช่วยให้คุณทำสิ่งต่อไปนี้ได้

  • ดูปัญหาด้านประสิทธิภาพการแสดงผล ตรวจหาการวาดภาพใหม่ การเปลี่ยนแปลงเลย์เอาต์ เลเยอร์และไทล์ ปัญหาการเลื่อน ดูสถิติการแสดงผล และ Core Web Vitals
  • จำลองฟีเจอร์สื่อ CSS ทดสอบวิธีที่หน้าเว็บแสดงผลด้วยฟีเจอร์สื่อ CSS ต่างๆ โดยไม่ต้องระบุฟีเจอร์เหล่านั้นด้วยตนเองในโค้ดหรือสภาพแวดล้อมการทดสอบ
  • ใช้เอฟเฟกต์อื่นๆ ที่มีประโยชน์ ไฮไลต์เฟรมโฆษณา จำลองโฟกัสในหน้าเว็บ ปิดใช้แบบอักษรและรูปแบบรูปภาพในเครื่อง เปิดใช้ธีมมืดโดยอัตโนมัติ และจำลองการมองเห็นที่บกพร่อง

เปิดแท็บการแสดงผล

วิธีเปิดแท็บการแสดงผล

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ

  2. กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดเมนูคำสั่ง

    เมนูคำสั่ง การแสดงผล

  3. เริ่มพิมพ์ rendering เลือกแสดงการแสดงผล แล้วกด Enter DevTools จะแสดงแท็บการแสดงผลที่ด้านล่างของหน้าต่าง DevTools

หรือจะเปิดแท็บการแสดงผลด้วยวิธีต่อไปนี้ก็ได้

  • กด Esc เพื่อเปิดลิ้นชัก แล้วคลิกเครื่องมือเพิ่มเติม เพิ่มเติม > การแสดงผลที่มุมซ้ายบน
  • ที่มุมขวาบน ให้คลิกตัวเลือกเพิ่มเติม เพิ่มเติม > เครื่องมือเพิ่มเติม > การแสดงผล