ข้อมูลอ้างอิงฟีเจอร์ด้านประสิทธิภาพ

หน้านี้เป็นข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับฟีเจอร์ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่เกี่ยวข้องกับการวิเคราะห์ประสิทธิภาพ

ดูวิเคราะห์ประสิทธิภาพขณะรันไทม์เพื่อดูบทแนะนำแบบมีคำแนะนำเกี่ยวกับวิธีวิเคราะห์ประสิทธิภาพของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

หน้าจอตัวชี้วัดแบบเรียลไทม์

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

เมตริกจะอัปเดตเมื่อคุณโต้ตอบกับหน้าเว็บและไปยังหน้าใหม่ รวมถึงการนำทางแบบย่อยฝั่งไคลเอ็นต์ในแอปพลิเคชันหน้าเว็บเดียว ซึ่งระบุด้วยป้ายการนำทางแบบย่อย ซึ่งเป็นวิธีที่ดีในการระบุปัญหาด้านประสิทธิภาพ โดยเฉพาะอย่างยิ่งสำหรับ INP และ CLS หากปรากฏในบางกรณีเท่านั้น เมื่อปัญหาด้านประสิทธิภาพเกิดขึ้นซ้ำๆ อย่างต่อเนื่อง คุณจะบันทึกการติดตามเพื่อดูรายละเอียดเพิ่มเติมในการแก้ไขข้อบกพร่องของปัญหาพื้นฐานได้

ฟีเจอร์ของหน้าจอตัวชี้วัดแบบเรียลไทม์

หน้าจอตัวชี้วัดแบบเรียลไทม์มีฟีเจอร์ต่อไปนี้นอกเหนือจากตัวชี้วัด

• เมตริกภาคสนามจาก CrUX เมื่อเปิดใช้ในแผงเมตริกภาคสนาม
• สรุปความแตกต่างที่สำคัญระหว่างเมตริกในเครื่องและเมตริกจากข้อมูลภาคสนาม
• องค์ประกอบ LCP ซึ่งวางเมาส์เหนือเพื่อไฮไลต์องค์ประกอบนี้ในหน้าเว็บได้
• รายละเอียดของคลัสเตอร์ CLS และประเภท INP
• รายละเอียดเพิ่มเติมเกี่ยวกับการวางเมาส์เหนือเมตริก (เช่น ส่วนย่อย LCP และ INP และฮิสโตแกรมภาคสนาม)
• แผงการโต้ตอบและการเปลี่ยนแปลงเลย์เอาต์ที่บันทึกประวัติหรือการโต้ตอบและการเปลี่ยนแปลงเลย์เอาต์
• แผงเมตริกภาคสนามที่สามารถเปิดข้อมูล CrUX, รายละเอียดระยะเวลาของข้อมูลดังกล่าว, ความสามารถในการสลับระหว่างข้อมูลต้นทางและข้อมูล URL (หากมี) และระหว่างข้อมูลเดสก์ท็อปและอินเทอร์เน็ตมือถือ
• แผงการตั้งค่าสภาพแวดล้อมพร้อมคำแนะนำเกี่ยวกับอุปกรณ์, CPU และการควบคุมเครือข่ายที่จะใช้ โดยอิงตามข้อมูล CrUX

ดูรายละเอียดเพิ่มเติมได้ที่บล็อกโพสต์ตรวจสอบประสิทธิภาพ Core Web Vitals ในเครื่องและของผู้ใช้จริงในเครื่องมือสำหรับนักพัฒนาเว็บ

ประสิทธิภาพของแผ่นเสียง

คุณสามารถบันทึกประสิทธิภาพรันไทม์หรือประสิทธิภาพการโหลดได้โดยใช้ปุ่มที่ด้านซ้ายบนหรือปุ่มด้านขวาของหน้าจอ ดังนี้

บันทึกประสิทธิภาพรันไทม์

บันทึกประสิทธิภาพรันไทม์เมื่อต้องการวิเคราะห์ประสิทธิภาพของหน้าเว็บขณะที่ทำงานอยู่ ไม่ใช่ขณะที่โหลด

1. ไปที่หน้าที่ต้องการวิเคราะห์
2. คลิกแท็บประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกบันทึก
4. โต้ตอบกับหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกกิจกรรมทั้งหมดในหน้าเว็บที่เกิดขึ้นจากการโต้ตอบของคุณ
5. คลิกบันทึกอีกครั้ง หรือคลิกหยุดเพื่อหยุดบันทึก

บันทึกประสิทธิภาพการโหลด

บันทึกประสิทธิภาพการโหลดเมื่อต้องการวิเคราะห์ประสิทธิภาพของหน้าเว็บขณะโหลด ไม่ใช่ขณะทํางาน

1. ไปยังหน้าที่ต้องการวิเคราะห์
2. เปิดแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกบันทึกและโหลดซ้ำ DevTools จะไปที่ about:blank ก่อนเพื่อล้างภาพหน้าจอและร่องรอยที่เหลือ จากนั้นเครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเมตริกประสิทธิภาพขณะที่หน้าเว็บโหลดซ้ำ แล้วหยุดการบันทึกโดยอัตโนมัติ 2-3 วินาทีหลังจากที่โหลดเสร็จ

เครื่องมือสำหรับนักพัฒนาเว็บจะซูมเข้าส่วนของการบันทึกที่มีกิจกรรมส่วนใหญ่เกิดขึ้นโดยอัตโนมัติ

ในตัวอย่างนี้ แผงประสิทธิภาพจะแสดงกิจกรรมในระหว่างการโหลดหน้าเว็บ

จับภาพหน้าจอขณะบันทึก

เปิดใช้ช่องทำเครื่องหมายภาพหน้าจอเพื่อจับภาพหน้าจอของทุกเฟรมขณะบันทึก

หากต้องการปรับแต่งความแม่นยำในการบันทึกภาพภายในงบประมาณหน่วยความจำ ให้เปิดการตั้งค่าการจับภาพ แล้วเลือกขนาดเฟรมและค่ากำหนดขีดจำกัดจำนวนเฟรมจากเมนูแบบเลื่อนลงการจับภาพหน้าจอ

ดูวิธีโต้ตอบกับภาพหน้าจอได้ที่หัวข้อดูภาพหน้าจอ

บังคับการจัดการหน่วยความจำที่ไม่ใช้แล้วขณะบันทึก

ขณะบันทึกหน้าเว็บ ให้คลิกเก็บขยะ mop เพื่อบังคับการเก็บขยะ

แสดงการตั้งค่าการบันทึก

คลิกการตั้งค่าการบันทึก เพื่อแสดงการตั้งค่าเพิ่มเติมที่เกี่ยวข้องกับวิธีที่เครื่องมือสำหรับนักพัฒนาเว็บจับภาพการบันทึกประสิทธิภาพ

ปิดใช้ตัวอย่าง JavaScript

โดยค่าเริ่มต้น แทร็กหลักของการบันทึกจะแสดงสแต็กการเรียกใช้โดยละเอียดของฟังก์ชัน JavaScript ที่เรียกใช้ระหว่างการบันทึก วิธีปิดใช้สแต็กการเรียกใช้เหล่านี้

1. เปิดเมนูการตั้งค่าการบันทึก ดูแสดงการตั้งค่าการบันทึก
2. เลือกช่องทำเครื่องหมายปิดใช้ตัวอย่าง JavaScript
3. บันทึกหน้าจอของหน้าเว็บ

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

ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่ปิดใช้อยู่

ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่เปิดใช้

จำกัดแบนด์วิดท์เครือข่ายขณะบันทึก

วิธีควบคุมปริมาณเครือข่ายขณะบันทึก

1. เปิดเมนูการตั้งค่าการบันทึก ดูแสดงการตั้งค่าการบันทึก
2. ตั้งค่าเครือข่ายเป็นการควบคุมปริมาณการใช้ที่เลือกระดับ

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

ควบคุม CPU ขณะบันทึก

วิธีควบคุม CPU ขณะบันทึก

1. เปิดเมนูการตั้งค่าการบันทึก ดูแสดงการตั้งค่าการบันทึก
2. ตั้งค่า CPU เป็นระดับการควบคุมที่เลือก

การควบคุมปริมาณจะขึ้นอยู่กับความสามารถของคอมพิวเตอร์ เช่น ตัวเลือกช้าลง 2 เท่าจะทำให้ CPU ทำงานช้ากว่าความสามารถปกติ 2 เท่า เครื่องมือสำหรับนักพัฒนาเว็บไม่สามารถจำลอง CPU ของอุปกรณ์เคลื่อนที่ได้อย่างแท้จริง เนื่องจากสถาปัตยกรรมของอุปกรณ์เคลื่อนที่แตกต่างจากเดสก์ท็อปและแล็ปท็อปอย่างมาก

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

เปิดใช้สถิติตัวเลือก CSS

หากต้องการดูสถิติของตัวเลือกกฎ CSS ในระหว่างเหตุการณ์คำนวณสไตล์ใหม่ที่ใช้เวลานาน ให้ทำดังนี้

1. เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
2. เลือกช่องทำเครื่องหมายเปิดใช้สถิติตัวเลือก CSS

ดูรายละเอียดเพิ่มเติมได้ที่วิธีวิเคราะห์ประสิทธิภาพของตัวเลือก CSS ระหว่างเหตุการณ์ Recalculate Style

เปิดใช้เครื่องมือวัดการแสดงผลขั้นสูง

วิธีดูการวัดประสิทธิภาพการแสดงผลอย่างละเอียด

1. เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
2. เลือกช่องทำเครื่องหมายเปิดใช้การวัดประสิทธิภาพการแสดงผลขั้นสูง

ดูวิธีโต้ตอบกับข้อมูลการระบายสีได้ที่ดูเลเยอร์และดูโปรไฟล์เลอร์การระบายสี

แสดงแทร็กที่กำหนดเอง

เปิดใช้แท็กที่กำหนดเองและข้อมูลสรุปกลุ่มแท็กที่กำหนดเองในข้อมูลสรุปการติดตาม ซึ่งปรับแต่งได้โดยใช้ DevTools Extensibility API

ล้างไฟล์บันทึกเสียงก่อนหน้า

หลังจากบันทึกแล้ว ให้กดล้างการบันทึก เพื่อล้างการบันทึกนั้นออกจากแผงประสิทธิภาพ

วิเคราะห์การบันทึกประสิทธิภาพ

หลังจากบันทึกประสิทธิภาพรันไทม์หรือบันทึกประสิทธิภาพการโหลด แผงประสิทธิภาพจะแสดงข้อมูลจำนวนมากสำหรับการวิเคราะห์ประสิทธิภาพของสิ่งที่เพิ่งเกิดขึ้น

ใส่คำอธิบายประกอบในไฟล์บันทึกและแชร์

ดูหัวข้อใส่คำอธิบายประกอบและแชร์สิ่งที่พบเกี่ยวกับประสิทธิภาพ

รับข้อมูลเชิงลึกที่นำไปใช้ได้จริง

แผงประสิทธิภาพมีข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพที่แสดงในรายงาน Lighthouse ด้วย ข้อมูลเชิงลึกเหล่านี้สามารถแนะนำวิธีปรับปรุงประสิทธิภาพและให้การวิเคราะห์พร้อมคำแนะนำเกี่ยวกับปัญหาด้านประสิทธิภาพต่อไปนี้ เช่น ส่วนย่อยของ LCP และ INP, ปัญหาการค้นพบคำขอ LCP, บุคคลที่สาม รวมถึงทรัพยากร JavaScript เดิมและที่ซ้ำกัน ดูรายการทั้งหมดได้ในเอกสารประกอบเกี่ยวกับข้อมูลเชิงลึกด้านประสิทธิภาพ

ข้อมูลเชิงลึกจะผ่านเมื่อไม่พบปัญหา แท็บข้อมูลเชิงลึกจะแสดงข้อมูลเชิงลึกดังกล่าวในส่วนข้อมูลเชิงลึกที่ผ่านไปแล้วที่ยุบไว้ด้านล่าง ข้อมูลเชิงลึกที่ไม่ผ่านจะแสดงอยู่ในส่วนเฉพาะของข้อมูลเชิงลึกนั้นๆ

วิธีใช้ประโยชน์จากข้อมูลเชิงลึก

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

ไปยังส่วนต่างๆ ของไฟล์บันทึก

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

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

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

ใช้แป้นพิมพ์ลัดเพื่อไปยังส่วนต่างๆ

หากต้องการใช้แป้นพิมพ์ลัดเพื่อไปยังส่วนต่างๆ ของไฟล์บันทึกเสียงอย่างรวดเร็ว ให้เลือกรูปแบบการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ที่ต้องการก่อน

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

• คลาสสิก: ซูมด้วยลูกกลิ้งเมาส์ (ทัชแพดขึ้นหรือลง) และเลื่อนแนวตั้งด้วย Shift + ลูกกลิ้งเมาส์
• โมเดิร์น: เลื่อนแนวตั้งด้วยลูกกลิ้งเมาส์ เลื่อนแนวนอนด้วย Shift + ลูกกลิ้งเมาส์ และซูมด้วย Command/Control + ลูกกลิ้งเมาส์

กล่องโต้ตอบแป้นพิมพ์ลัดยังมีข้อมูลสรุปเกี่ยวกับแป้นพิมพ์ลัดที่ใช้ได้ด้วย

เลือกส่วนของไฟล์บันทึกเสียง

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

หากต้องการเลือกส่วนของไฟล์บันทึกเสียง ให้คลิกค้างไว้ แล้วลากไปทางซ้ายหรือขวาในภาพรวมไทม์ไลน์

วิธีเลือกบางส่วนโดยใช้แป้นพิมพ์

1. โฟกัสแทร็กหลักหรือแทร็กที่อยู่ติดกัน
2. ใช้แป้น W, A, S, D เพื่อซูมเข้า เลื่อนไปทางซ้าย ซูมออก และเลื่อนไปทางขวา ตามลำดับ

วิธีเลือกส่วนโดยใช้แทร็กแพด

1. วางเมาส์เหนือส่วนภาพรวมไทม์ไลน์หรือแทร็กใดก็ได้ (หลักและแทร็กที่อยู่ติดกัน)
2. ใช้ 2 นิ้วปัดขึ้นเพื่อซูมออก ปัดไปทางซ้ายเพื่อเลื่อนไปทางซ้าย ปัดลงเพื่อซูมเข้า และ ปัดไปทางขวาเพื่อเลื่อนไปทางขวา

สร้างเบรดครัมบ์และข้ามระหว่างระดับการซูม

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

วิธีสร้างและใช้เบรดครัมบ์

1. ในภาพรวมไทม์ไลน์ ให้เลือกส่วนของไฟล์บันทึกเสียง
2. วางเมาส์เหนือส่วนที่เลือก แล้วคลิกปุ่ม N ms zoom_in ส่วนที่เลือกจะขยายเพื่อเติมภาพรวมไทม์ไลน์ ระบบจะเริ่มสร้างเชนของ Breadcrumb ที่ด้านบนของภาพรวมไทม์ไลน์
3. ทำ 2 ขั้นตอนก่อนหน้าซ้ำเพื่อสร้าง Breadcrumb แบบซ้อนอีกรายการ คุณสามารถฝังเบรดครัมบ์ต่อไปได้ตราบใดที่ช่วงการเลือกมากกว่า 5 มิลลิวินาที
4. หากต้องการข้ามไปยังระดับการซูมที่เลือก ให้คลิกเบรดครัมบ์ที่เกี่ยวข้องในเชนที่ด้านบนของภาพรวมไทม์ไลน์

หากต้องการนำเบรดครัมบ์ย่อยออก ให้คลิกขวาที่เบรดครัมบ์หลัก แล้วเลือกนำเบรดครัมบ์ย่อยออก

เลื่อนแผนภูมิ Flame Chart แบบยาว

หากต้องการเลื่อนแผนภูมิ Flame Chart ยาวในแทร็กหลักหรือแทร็กที่อยู่ติดกัน ให้คลิกค้างไว้ แล้วลากไปในทิศทางใดก็ได้จนกว่าจะเห็นสิ่งที่ต้องการ

ไม่สนใจสคริปต์ที่ไม่เกี่ยวข้องในแผนภูมิ Flame Chart

คุณสามารถเพิ่มสคริปต์ที่ไม่เกี่ยวข้องลงในรายการละเว้นเพื่อให้โฟกัสที่โค้ดได้ดีขึ้น

หากต้องการไม่สนใจสคริปต์ ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้

• คลิกบีบอัด แสดงกล่องโต้ตอบการตั้งค่ารายการละเว้นในแถบการดำเนินการด้านบน แล้วพิมพ์นิพจน์ทั่วไปในช่องป้อนข้อมูล แผนภูมิ Flame Chart จะใช้กฎใหม่ขณะที่คุณพิมพ์
• คลิกขวาที่สคริปต์แล้วเลือกเพิ่มสคริปต์ลงในรายการละเว้น แผงประสิทธิภาพจะเพิ่มสคริปต์นี้ลงในรายการในบีบอัด แสดงกล่องโต้ตอบการตั้งค่ารายการละเว้น

แผงจะยุบการฝังที่มากเกินไปสำหรับสคริปต์ดังกล่าวโดยอัตโนมัติ และทำเครื่องหมายเป็น On ignore list (REGULAR_EXPRESSION)

ในกล่องโต้ตอบแสดงการตั้งค่ารายการละเว้นแบบย่อ คุณสามารถเปิดและปิดกฎรายการละเว้นได้

หากต้องการนำสคริปต์ออกจากรายการละเว้น ให้คลิกขวาที่สคริปต์ในแผนภูมิ Flame Chart แล้วเลือกนำสคริปต์ออกจากรายการละเว้น หรือวางเมาส์เหนือสคริปต์ในcompress กล่องโต้ตอบแสดงการตั้งค่ารายการละเว้น แล้วคลิกdelete นำออก

DevTools จะบันทึกกฎรายการละเว้นที่คุณเพิ่มไว้ในการตั้งค่า การตั้งค่า > รายการละเว้น

นอกจากนี้ หากต้องการมุ่งเน้นที่สคริปต์ของบุคคลที่หนึ่งเท่านั้น ให้เลือก check_box Dim 3rd parties แผงประสิทธิภาพจะทำให้สคริปต์ของบุคคลที่สามเป็นสีเทา

กิจกรรมการค้นหา

คุณสามารถค้นหากิจกรรมในแทร็กหลักและคำขอในแทร็กเครือข่ายได้

หากต้องการเปิดช่องค้นหาที่ด้านล่างของแผงประสิทธิภาพ ให้กดแป้นต่อไปนี้

• macOS: Command+F
• Windows, Linux: Control+F

ตัวอย่างนี้แสดงนิพจน์ทั่วไปในช่องค้นหาที่ด้านล่างซึ่งค้นหากิจกรรมที่ขึ้นต้นด้วย E

วิธีไล่ดูกิจกรรมที่ตรงกับคำค้นหา

• คลิกปุ่มexpand_less ก่อนหน้าหรือexpand_more ถัดไป
• กด Shift+Enter เพื่อเลือกรายการก่อนหน้า หรือกด Enter เพื่อเลือกรายการถัดไป

แผงประสิทธิภาพจะแสดงเคล็ดลับเครื่องมือเหนือกิจกรรมที่เลือกในช่องค้นหา

วิธีแก้ไขการตั้งค่าการค้นหา

• คลิก match_case ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ตรงกันเพื่อให้การค้นหาคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
• คลิก regular_expression นิพจน์ทั่วไปเพื่อใช้นิพจน์ทั่วไปในคำค้นหา

หากต้องการซ่อนช่องค้นหา ให้คลิกยกเลิก

เปลี่ยนลำดับของแทร็กและซ่อนแทร็ก

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

วิธีย้ายและซ่อนแทร็ก

1. หากต้องการเข้าสู่โหมดการกำหนดค่า ให้คลิกขวาที่ชื่อแทร็กแล้วเลือกกำหนดค่าแทร็ก
2. คลิก arrow_upward ขึ้นหรือ arrow_downward ลงเพื่อย้ายแทร็กขึ้นหรือลง คลิก visibility_off เพื่อซ่อน
3. เมื่อเสร็จแล้ว ให้คลิกกำหนดค่าการติดตามให้เสร็จสิ้นที่ด้านล่างเพื่อออกจากโหมดการกำหนดค่า

ดูวิดีโอเพื่อดูการทำงานของเวิร์กโฟลว์นี้

แผงประสิทธิภาพจะบันทึกการกำหนดค่าแทร็กสำหรับการติดตามใหม่ แต่จะไม่บันทึกในเซสชันเครื่องมือสำหรับนักพัฒนาเว็บถัดไป

ดูกิจกรรมของเทรดหลัก

ใช้แทร็กหลักเพื่อดูกิจกรรมที่เกิดขึ้นในเทรดหลักของหน้า

คลิกเหตุการณ์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ในแท็บสรุป ซึ่งรวมถึงแต่ไม่จำกัดเพียง ระยะเวลา (และระยะเวลาของตัวเอง) ลิงก์ไปยังบรรทัดที่เกี่ยวข้องในสคริปต์ต้นฉบับ, URL ต้นทาง (พร้อมชื่อเอนทิตี หากทราบ) สแต็กเทรซ (หากมี) และรายละเอียดเวลาในแผนภูมิวงกลม

แผงประสิทธิภาพจะแสดงกิจกรรมที่เลือกเป็นสีน้ำเงิน

ตัวอย่างนี้แสดงข้อมูลเพิ่มเติมเกี่ยวกับgetเหตุการณ์การเรียกใช้ฟังก์ชันในแท็บสรุป

แยกแยะระหว่างเหตุการณ์ของบุคคลที่หนึ่งและบุคคลที่สาม

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

หากต้องการมุ่งเน้นเฉพาะประสิทธิภาพของโค้ดของบุคคลที่หนึ่ง ให้ทำดังนี้

1. ตรวจสอบว่าไม่ได้เลือกอะไรในร่องรอยประสิทธิภาพหรือในแท็บข้อมูลเชิงลึก โดยคลิกพื้นที่ว่างในการติดตาม
2. เลือกcheck_box Dim 3rd parties ในแถบการดำเนินการที่ด้านบน แผงประสิทธิภาพจะทำให้เหตุการณ์ที่เกี่ยวข้องกับบุคคลที่สามจากร่องรอยประสิทธิภาพเป็นสีเทา และไฮไลต์เฉพาะเหตุการณ์ของบุคคลที่หนึ่ง

ไฮไลต์เหตุการณ์ด้วยตาราง "บุคคลที่หนึ่ง / บุคคลที่สาม"

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

• เอนทิตีของบุคคลที่หนึ่งที่มีป้าย 1st party กำกับอยู่
• เอนทิตีของบุคคลที่สามทั้งหมดที่ตรวจพบในช่วงที่เลือกซึ่งไม่ได้ทำเครื่องหมาย
• ส่วนขยายที่มีป้าย Extension กำกับอยู่
• เอนทิตีอื่นๆ ของ [unattributed]

หากต้องการดูเหตุการณ์ที่เกี่ยวข้องซึ่งไฮไลต์ไว้ในการติดตามและเหตุการณ์ที่เหลือซึ่งเป็นสีเทา ให้วางเมาส์เหนือเอนทิตีในตาราง หากต้องการให้ระบบไฮไลต์กิจกรรมของเอนทิตีไว้ ให้เลือกเอนทิตีในตาราง หากต้องการนำการไฮไลต์ออก ให้คลิกพื้นที่ว่างในร่องรอย

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

อ่านแผนภูมิ Flame Chart

แผงประสิทธิภาพแสดงกิจกรรมของเทรดหลักในแผนภูมิ Flame Chart แกน X แสดงการบันทึกเมื่อเวลาผ่านไป แกน Y แสดงสแต็กการเรียกใช้ เหตุการณ์ด้านบนทำให้เกิดเหตุการณ์ด้านล่าง

ตัวอย่างนี้แสดงแผนภูมิ Flame Chart ในแทร็กหลัก เหตุการณ์ click ทำให้เกิดการเรียกใช้ฟังก์ชันที่ไม่ระบุตัวตน ฟังก์ชันนี้จะเรียกใช้ onEndpointClick_ ซึ่งเรียกใช้ handleClick_ และอื่นๆ

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

งานที่ใช้เวลานานจะไฮไลต์ด้วยสามเหลี่ยมสีแดง และส่วนที่เกิน 50 มิลลิวินาทีจะแรเงาเป็นสีแดง

ในตัวอย่างนี้ งานใช้เวลามากกว่า 400 มิลลิวินาที ดังนั้นส่วนที่แสดง 350 มิลลิวินาทีสุดท้ายจึงแรเงาเป็นสีแดง ส่วน 50 มิลลิวินาทีแรกจะไม่แรเงา

นอกจากนี้ แทร็กหลักจะแสดงข้อมูลเกี่ยวกับเครื่องมือสร้างโปรไฟล์ CPU ที่เริ่มต้นและหยุดด้วยฟังก์ชันคอนโซล profile() และ profileEnd() การเรียก console.profileEnd() ในโค้ดหรือในคอนโซลจะเปิดแผงประสิทธิภาพโดยอัตโนมัติและแสดงการติดตามที่บันทึกไว้

หากต้องการซ่อนแผนภูมิ Flame Chart โดยละเอียดของการเรียกใช้ JavaScript โปรดดูหัวข้อปิดใช้ตัวอย่าง JavaScript เมื่อปิดใช้ตัวอย่าง JS คุณจะเห็นเฉพาะเหตุการณ์ระดับสูง เช่น Event (click) และ Function Call

ติดตามผู้เริ่มเหตุการณ์

แทร็กหลักสามารถแสดงลูกศรที่เชื่อมต่อตัวเริ่มต้นต่อไปนี้กับเหตุการณ์ที่เกิดขึ้น

• การลบล้างรูปแบบหรือเลย์เอาต์ -> คำนวณรูปแบบใหม่หรือเลย์เอาต์
• ส่งคำขอเฟรมภาพเคลื่อนไหว -> เฟรมของภาพเคลื่อนไหวทำงาน
• ขอ Callback ที่ไม่มีการใช้งาน -> เริ่มใช้ Callback ที่ไม่มีการใช้งาน
• Install Timer -> Timer Fired
• สร้าง WebSocket -> ส่ง... และรับแฮนด์เชค WebSocket หรือทำลาย WebSocket
• กำหนดเวลา postTask -> เรียกใช้งาน postTask หรือยกเลิก postTask

หากต้องการดูลูกศร ให้ค้นหาตัวเริ่มต้นหรือเหตุการณ์ที่เกิดจากตัวเริ่มต้นในแผนภูมิ Flame Chart แล้วเลือกเหตุการณ์นั้น

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

ซ่อนฟังก์ชันและฟังก์ชันย่อยในแผนภูมิ Flame Chart

หากต้องการจัดระเบียบแผนภูมิ Flame Chart ในเทรดหลัก คุณสามารถซ่อนฟังก์ชันที่เลือกหรือฟังก์ชันย่อยได้โดยทำดังนี้

1. ในแทร็กหลัก ให้คลิกขวาที่ฟังก์ชัน แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้ หรือกดแป้นพิมพ์ลัดที่เกี่ยวข้อง

   • ซ่อนฟังก์ชัน (H)
   • ซ่อนรายการย่อย (C)
   • ซ่อนรายการย่อยที่ซ้ำ (R)
   • รีเซ็ตรายการย่อย (U)
   • รีเซ็ตการติดตาม (T)
   • เพิ่มสคริปต์ลงในรายการละเว้น (I)

   

   ปุ่มเมนูแบบเลื่อนลง arrow_drop_down จะปรากฏข้างชื่อฟังก์ชันที่มีรายการย่อยที่ซ่อนอยู่

2. หากต้องการดูจำนวนรายการย่อยที่ซ่อนอยู่ ให้วางเมาส์เหนือปุ่มเมนูแบบเลื่อนลง arrow_drop_down

   

3. หากต้องการรีเซ็ตฟังก์ชันที่มีฟังก์ชันย่อยที่ซ่อนอยู่หรือแผนภูมิ Flame Chart ทั้งหมด ให้เลือกฟังก์ชันแล้วกด U หรือคลิกขวาที่ฟังก์ชันใดก็ได้ แล้วเลือกรีเซ็ตการติดตามตามลำดับ

ละเว้นสคริปต์ในแผนภูมิ Flame Chart

หากต้องการเพิ่มสคริปต์ลงในรายการละเว้น ให้คลิกขวาสคริปต์ในแผนภูมิ แล้วเลือกเพิ่มสคริปต์ลงในรายการละเว้น

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

ดูกิจกรรมในตาราง

หลังจากบันทึกหน้าเว็บแล้ว คุณไม่จำเป็นต้องพึ่งพาแทร็กหลักเพียงอย่างเดียวในการวิเคราะห์กิจกรรม นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังมีมุมมองแบบตาราง 3 แบบสำหรับการวิเคราะห์กิจกรรม แต่ละมุมมองจะแสดงกิจกรรมในมุมมองที่แตกต่างกัน ดังนี้

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

คุณสามารถคลิกรายการในตารางใดก็ได้จาก 3 ตาราง (และในตารางบุคคลที่หนึ่ง / บุคคลที่สามในแท็บสรุป) เพื่อไฮไลต์เหตุการณ์ที่เกี่ยวข้องในร่องรอยและลดความสว่างของส่วนที่เหลือขณะที่คุณเรียกดูร่องรอยประสิทธิภาพ

ทั้ง 3 แท็บมีปุ่มสำหรับการกรองขั้นสูงอยู่ข้างแถบตัวกรองเพื่อช่วยให้คุณค้นหาสิ่งที่ต้องการได้เร็วขึ้น ดังนี้

• match_case ให้ตัวพิมพ์เล็ก/พิมพ์ใหญ่ตรงกัน
• regular_expression นิพจน์ทั่วไป
• match_word ตรงกันทั้งคำ

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

คลิกลิงก์เพื่อเปิดไฟล์ต้นฉบับในแผงแหล่งที่มา

กิจกรรมรูท

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

กิจกรรมรูทคือกิจกรรมที่ทำให้เบราว์เซอร์ทำงานบางอย่าง ตัวอย่างเช่น เมื่อคุณคลิก หน้าเว็บ เบราว์เซอร์จะเรียกใช้Eventกิจกรรมเป็นกิจกรรมรูท จากนั้น Event อาจทำให้ตัวแฮนเดิล ทำงาน

ในแผนภูมิ Flame Chart ของแทร็กหลัก กิจกรรมรูทจะอยู่ที่ด้านบนของแผนภูมิ ในแท็บCall Tree และบันทึกเหตุการณ์ กิจกรรมรูทคือรายการระดับบนสุด

ดูตัวอย่างกิจกรรมรูทได้ในแท็บแผนผังการเรียก

แท็บแผนผังการเรียกใช้

ใช้แท็บแผนภูมิการเรียกเพื่อดูว่ากิจกรรมรูทใดที่ทำให้เกิดงานมากที่สุด

แท็บแผนผังการโทรจะแสดงเฉพาะกิจกรรมในช่วงที่เลือกของการบันทึกเท่านั้น ดูวิธีเลือกบางส่วนของไฟล์บันทึกเสียงได้ที่หัวข้อเลือกบางส่วนของไฟล์บันทึกเสียง

ในตัวอย่างนี้ รายการระดับบนสุดในคอลัมน์กิจกรรม เช่น Event, Paint และ Composite Layers คือกิจกรรมรูท การฝังแสดงถึงสแต็กการเรียกใช้ ใน ตัวอย่างนี้ Event ทำให้เกิด Function Call ซึ่งทำให้เกิด button.addEventListener ซึ่งทำให้เกิด b และอื่นๆ

เวลาของตัวเองแสดงถึงเวลาที่ใช้ในกิจกรรมนั้นโดยตรง เวลาทั้งหมดแสดงเวลาที่ใช้ในกิจกรรมนั้นหรือกิจกรรมย่อยของกิจกรรมนั้น

คลิกเวลาของตัวเอง เวลารวม หรือกิจกรรมเพื่อจัดเรียงตารางตามคอลัมน์นั้น

ใช้ช่องตัวกรองเพื่อกรองเหตุการณ์ตามชื่อกิจกรรม

โดยค่าเริ่มต้น เมนูการจัดกลุ่มจะตั้งค่าเป็นไม่มีการจัดกลุ่ม ใช้เมนูการจัดกลุ่มเพื่อจัดเรียงตารางกิจกรรมตามเกณฑ์ต่างๆ

แท็บ "จากล่างขึ้นบน"

ใช้แท็บจากล่างขึ้นบนเพื่อดูกิจกรรมที่ใช้เวลาโดยตรงมากที่สุดโดยรวม

แท็บจากล่างขึ้นบนจะแสดงเฉพาะกิจกรรมในช่วงที่เลือกของการบันทึกเท่านั้น ดูวิธีเลือกบางส่วนได้ที่หัวข้อเลือกบางส่วนของไฟล์บันทึก

ในแผนภูมิ Flame Chart ของแทร็กหลักของตัวอย่างนี้ คุณจะเห็นว่าเวลาเกือบทั้งหมดใช้ไปกับการดำเนินการเรียกใช้ wait() 3 ครั้ง ดังนั้น กิจกรรมยอดนิยมในแท็บจากล่างขึ้นบนคือ wait ในแผนภูมิ Flame Chart สีเหลืองใต้การเรียกใช้ wait คือการเรียกใช้ Minor GC หลายพันครั้ง ดังนั้น คุณจะเห็นว่าในแท็บจากล่างขึ้นบน กิจกรรมที่ใช้ทรัพยากรมากที่สุดเป็นอันดับถัดไปคือ Minor GC

คอลัมน์เวลาของตัวเองแสดงเวลาโดยรวมที่ใช้ในกิจกรรมนั้นโดยตรงในทุกอินสแตนซ์ของกิจกรรม

คอลัมน์เวลาทั้งหมดแสดงเวลาโดยรวมที่ใช้ในกิจกรรมนั้นหรือกิจกรรมย่อย

ตารางสแต็กที่ใช้เวลาดำเนินการสูงสุด

ที่ด้านขวาของแท็บแผนผังการเรียกหรือจากล่างขึ้นบน ให้คลิก right_panel_open แสดงสแต็กที่หนักที่สุดเพื่อแสดงตารางสแต็กที่หนักที่สุด

ตารางนี้จะแสดงให้เห็นว่ากิจกรรมใดของบุตรหลานที่ใช้เวลานานที่สุดในการดำเนินการ วางเมาส์เหนือรายการในตารางเพื่อดูเหตุการณ์ที่เกี่ยวข้องซึ่งไฮไลต์ไว้ในแทร็กหลักและส่วนที่เหลือจะจางลง

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

แท็บบันทึกเหตุการณ์

ใช้แท็บบันทึกเหตุการณ์เพื่อดูกิจกรรมตามลำดับที่เกิดขึ้นระหว่างการบันทึก

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

คอลัมน์เวลาเริ่มต้นแสดงจุดที่กิจกรรมนั้นเริ่มต้นขึ้น โดยสัมพันธ์กับจุดเริ่มต้นของการบันทึก เวลาเริ่มต้น 1573.0 ms สำหรับรายการที่เลือกในตัวอย่างนี้หมายความว่ากิจกรรมเริ่มขึ้น 1,573 มิลลิวินาทีหลังจากเริ่มบันทึก

คอลัมน์เวลาที่ใช้เองแสดงเวลาที่ใช้ในกิจกรรมนั้นโดยตรง

คอลัมน์เวลาทั้งหมดแสดงเวลาที่ใช้ในกิจกรรมนั้นโดยตรงหรือในกิจกรรมย่อย

คลิกเวลาเริ่มต้น เวลาของตัวเอง หรือเวลารวมเพื่อจัดเรียงตารางตามคอลัมน์นั้น

ใช้ช่องตัวกรองเพื่อกรองกิจกรรมตามชื่อ

ใช้เมนูระยะเวลาเพื่อกรองกิจกรรมที่ใช้เวลาน้อยกว่า 1 มิลลิวินาทีหรือ 15 มิลลิวินาทีออก โดยค่าเริ่มต้น เมนูระยะเวลาจะตั้งค่าเป็นทั้งหมด ซึ่งหมายความว่าระบบจะแสดงกิจกรรมทั้งหมด

ปิดใช้ช่องทำเครื่องหมายการโหลด การเขียนสคริปต์ การแสดงผล หรือการวาดเพื่อกรองกิจกรรมทั้งหมดออกจากหมวดหมู่เหล่านั้น

ดูเครื่องหมายประสิทธิภาพ

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

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• เหตุการณ์ DOMContentLoaded (DCL)
• เหตุการณ์ Onload (L)

วางเมาส์เหนือชื่อเครื่องหมายที่ด้านล่างของร่องรอยเพื่อดูการประทับเวลา

ดูช่วงเวลาที่กำหนดเอง

ในแทร็กการกำหนดเวลา ให้ดูเครื่องหมายประสิทธิภาพที่กำหนดเอง เช่น

• performance.mark() เครื่องหมายแต่ละรายการพร้อมเคล็ดลับเครื่องมือจะแสดงอยู่ด้านล่างที่ 813.44 มิลลิวินาที โดยมีป้ายกำกับว่าเริ่มเรียกใช้ JavaScript
• performance.measure() ช่วงสีเหลืองจะแสดงอยู่ด้านล่าง โดยมีป้ายกำกับว่าการโต้ตอบช้า

เลือกเครื่องหมายเพื่อดูรายละเอียดเพิ่มเติมในแท็บสรุป ซึ่งรวมถึงการประทับเวลา เวลาทั้งหมด เวลาของตัวเอง และออบเจ็กต์ detail สำหรับการเรียกใช้ performance.mark() และ performance.measure() แท็บนี้จะแสดงสแต็กเทรซด้วย

ดูการโต้ตอบ

ดูการโต้ตอบของผู้ใช้ในแทร็กการโต้ตอบเพื่อติดตามปัญหาการตอบสนองที่อาจเกิดขึ้น

วิธีดูการโต้ตอบ

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ เช่น ในหน้าสาธิตนี้
2. เปิดแผงประสิทธิภาพ แล้วเริ่มการบันทึก
3. คลิกองค์ประกอบ (กาแฟ) และหยุดการบันทึก
4. ค้นหาแทร็กการโต้ตอบในไทม์ไลน์

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

แทร็กการโต้ตอบยังแสดงคำเตือน Interaction to Next Paint (INP) สำหรับการโต้ตอบที่นานกว่า 200 มิลลิวินาทีในแท็บสรุปและในเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือ

แทร็กการโต้ตอบจะทำเครื่องหมายการโต้ตอบที่นานกว่า 200 มิลลิวินาทีด้วยสามเหลี่ยมสีแดงที่มุมขวาบน

ดูการเปลี่ยนแปลงเลย์เอาต์

ดูการเปลี่ยนแปลงเลย์เอาต์ในแทร็กการเปลี่ยนแปลงเลย์เอาต์ การเลื่อนจะแสดงเป็นสี่เหลี่ยมข้าวหลามตัดสีม่วงและจัดกลุ่มในคลัสเตอร์ (เส้นสีม่วง) ตามระยะใกล้บนไทม์ไลน์

หากต้องการไฮไลต์องค์ประกอบที่ทำให้เกิดการเปลี่ยนเลย์เอาต์ในวิวพอร์ต ให้วางเมาส์เหนือสี่เหลี่ยมข้าวหลามตัดที่เกี่ยวข้อง

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

ดูข้อมูลเพิ่มเติมได้ที่ Cumulative Layout Shift (CLS)

ดูภาพเคลื่อนไหว

ดูภาพเคลื่อนไหวในแทร็กภาพเคลื่อนไหว ภาพเคลื่อนไหวจะตั้งชื่อตามพร็อพเพอร์ตี้หรือองค์ประกอบ CSS ที่เกี่ยวข้อง (หากมี) เช่น transform หรือ my-element ภาพเคลื่อนไหวที่ไม่ใช่การคอมโพสิตจะมีเครื่องหมายสามเหลี่ยมสีแดงที่มุมขวาบน

เลือกภาพเคลื่อนไหวเพื่อดูรายละเอียดเพิ่มเติมในแท็บสรุป ซึ่งรวมถึงสาเหตุที่การคอมโพสิตล้มเหลว

ดูกิจกรรมของ GPU

ดูกิจกรรมของ GPU ในส่วน GPU

ดูกิจกรรมแรสเตอร์

ดูกิจกรรมแรสเตอร์ในส่วนพูลชุดข้อความ

วิเคราะห์เฟรมต่อวินาที (FPS)

DevTools มีวิธีมากมายในการวิเคราะห์เฟรมต่อวินาที ดังนี้

• ใช้ส่วนเฟรมเพื่อดูระยะเวลาที่ใช้ในการแสดงผลเฟรมหนึ่งๆ
• ใช้เครื่องวัด FPS เพื่อประมาณค่า FPS แบบเรียลไทม์ขณะที่หน้าเว็บทำงาน ดูดูเฟรมต่อวินาที แบบเรียลไทม์ด้วยมิเตอร์ FPS

ส่วนเฟรม

ส่วนเฟรมจะบอกระยะเวลาที่ใช้ในการแสดงเฟรมหนึ่งๆ อย่างแม่นยำ

วางเมาส์เหนือเฟรมเพื่อดูเคล็ดลับเครื่องมือที่มีข้อมูลเพิ่มเติมเกี่ยวกับเฟรมนั้น

ตัวอย่างนี้แสดงเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือเฟรม

ส่วนเฟรมสามารถแสดงเฟรมได้ 4 ประเภท ดังนี้

1. เฟรมที่ไม่มีการใช้งาน (สีขาว) ไม่มีการเปลี่ยนแปลง
2. เฟรม (สีเขียว) แสดงผลตามที่คาดไว้และทันเวลา
3. เฟรมที่แสดงบางส่วน (สีเหลืองที่มีรูปแบบเส้นประแบบกว้างและห่าง) Chrome พยายามอย่างเต็มที่เพื่อแสดงผลการอัปเดตภาพอย่างน้อยบางส่วนให้ทันเวลา เช่น ในกรณีที่งานของเทรดหลักของกระบวนการแสดงผล (ภาพเคลื่อนไหว Canvas) ล่าช้า แต่เทรด Compositor (การเลื่อน) ทำงานได้ทันเวลา
4. เฟรมที่ลดน้อยลง (สีแดงที่มีรูปแบบเส้นทึบหนาแน่น) Chrome แสดงผลเฟรมภายในระยะเวลาอันควรไม่ได้

ตัวอย่างนี้แสดงเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือเฟรมที่นำเสนอเพียงบางส่วน

คลิกเฟรมเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเฟรมในแท็บสรุป เครื่องมือสำหรับนักพัฒนาเว็บ จะร่างกรอบที่เลือกเป็นสีน้ำเงิน

ดูคำขอของเครือข่าย

ขยายส่วนเครือข่ายเพื่อดู Waterfall ของคำขอเครือข่ายที่เกิดขึ้นระหว่างการบันทึกประสิทธิภาพ

ข้างชื่อแทร็กเครือข่ายจะมีคำอธิบายพร้อมประเภทคำขอที่ใช้รหัสสี

คำขอที่บล็อกการแสดงผลจะมีเครื่องหมายสามเหลี่ยมสีแดงที่มุมขวาบน

วางเมาส์เหนือคำขอเพื่อดูเคล็ดลับเครื่องมือที่มีข้อมูลต่อไปนี้

• URL ของคำขอและเวลาทั้งหมดที่ใช้ในการดำเนินการ
• ลำดับความสำคัญหรือการเปลี่ยนแปลงลำดับความสำคัญ เช่น Medium -> High
• คำขอเป็น Render-blocking หรือไม่
• รายละเอียดเกี่ยวกับช่วงเวลาของคำขอ ซึ่งจะอธิบายในภายหลัง

เมื่อคุณคลิกคำขอ แทร็กเครือข่ายจะวาดลูกศรจากตัวเริ่มต้นไปยังคำขอ

นอกจากนี้ แผงประสิทธิภาพจะแสดงแท็บสรุปพร้อมข้อมูลเพิ่มเติมเกี่ยวกับคำขอ ซึ่งรวมถึงแต่ไม่จำกัดเพียงช่องลำดับความสำคัญเริ่มต้นและลำดับความสำคัญ (สุดท้าย) หากค่าแตกต่างกัน แสดงว่าลำดับความสำคัญในการดึงข้อมูลของคำขอมีการเปลี่ยนแปลงในระหว่างการบันทึก ดูข้อมูลเพิ่มเติมได้ที่การเพิ่มประสิทธิภาพการโหลดทรัพยากรด้วย Fetch Priority API

แท็บสรุปยังแสดงรายละเอียดเวลาของคำขอด้วย

ในตัวอย่างนี้ คำขอสำหรับ www.google.com จะแสดงด้วยเส้นทางด้านซ้าย (|–) แถบตรงกลางที่มีส่วนสีเข้มและส่วนสีอ่อน และเส้นทางด้านขวา (–|)

หากมี แท็บสรุปจะแสดงรายละเอียดการจับเวลาฝั่งเซิร์ฟเวอร์สำหรับคำขอเครือข่ายที่ใช้เทคโนโลยีการแสดงผลฝั่งเซิร์ฟเวอร์ด้วย สําหรับคําขอเหล่านี้ แผงประสิทธิภาพจะนําข้อมูลมาจากส่วนหัวการตอบกลับ Server-Timing

คุณดูรายละเอียดเวลาอื่นๆ ได้ในแท็บเครือข่าย คลิกขวาที่คำขอในแทร็กเครือข่ายหรือ URL ของคำขอในแท็บสรุป แล้วคลิกแสดงในแผงเครือข่าย เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังแผงเครือข่ายและเลือกคำขอที่เกี่ยวข้อง เปิดแท็บเวลา

การแบ่งกลุ่มทั้ง 2 แบบนี้มีความสัมพันธ์กันดังนี้

• เส้นทางซ้าย (|–) คือทุกอย่างจนถึงกลุ่มเหตุการณ์ Connection start (รวมกลุ่มนี้ด้วย) กล่าวคือ ทุกอย่างก่อน Request Sent
• ส่วนที่เป็นสีอ่อนของแถบคือ Request sent และ Waiting for server response
• ส่วนสีเข้มของแถบคือ Content download
• เส้นด้านขวา (–|) คือเวลาที่ใช้ในการรอเทรดหลัก แท็บเครือข่าย > เวลาไม่แสดง

ดูเมตริกหน่วยความจำ

เปิดใช้ช่องทำเครื่องหมายหน่วยความจำเพื่อดูเมตริกหน่วยความจำจากการบันทึกครั้งล่าสุด

DevTools จะแสดงแผนภูมิหน่วยความจำใหม่เหนือแท็บสรุป นอกจากนี้ ยังมีแผนภูมิใหม่ด้านล่าง แผนภูมิ NET ซึ่งเรียกว่า HEAP แผนภูมิ HEAP จะแสดงข้อมูลเดียวกับบรรทัด JS Heap ในแผนภูมิหน่วยความจำ

ตัวอย่างนี้แสดงเมตริกหน่วยความจำเหนือแท็บสรุป

เส้นสีในแผนภูมิจะเชื่อมโยงกับช่องทำเครื่องหมายสีที่อยู่เหนือแผนภูมิ ปิดใช้ช่องทำเครื่องหมายเพื่อซ่อนหมวดหมู่นั้นจากแผนภูมิ

แผนภูมิจะแสดงเฉพาะภูมิภาคของไฟล์บันทึกที่เลือก ในตัวอย่างก่อนหน้า แผนภูมิการใช้งานหน่วยความจำจะแสดงเฉพาะการใช้งานหน่วยความจำสำหรับการเริ่มต้นการบันทึกจนถึงประมาณเครื่องหมาย 1,000 มิลลิวินาที

ดูระยะเวลาของส่วนหนึ่งของไฟล์บันทึก

เมื่อวิเคราะห์ส่วน เช่น เครือข่ายหรือหลัก บางครั้งคุณอาจต้องประมาณระยะเวลาที่เหตุการณ์หนึ่งๆ ใช้ไปอย่างแม่นยำมากขึ้น กด Shift ค้างไว้ คลิกค้างไว้ แล้วลากไปทางซ้ายหรือขวาเพื่อเลือกส่วนหนึ่ง ของการบันทึก ที่ด้านล่างของส่วนที่เลือก เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงระยะเวลาที่ใช้ในส่วนนั้น

ในตัวอย่างนี้ การประทับเวลา 488.53ms ที่ด้านล่างของส่วนที่เลือกจะระบุระยะเวลาที่ใช้ในส่วนนั้น

ดูภาพหน้าจอ

ดูวิธีเปิดใช้ภาพหน้าจอได้ที่หัวข้อจับภาพหน้าจอขณะบันทึก

วางเมาส์เหนือภาพรวมไทม์ไลน์เพื่อดูภาพหน้าจอของลักษณะหน้าเว็บในช่วงเวลานั้นของการบันทึก ภาพรวมไทม์ไลน์คือส่วนที่มีแผนภูมิ CPU, FPS และ NET

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

ตัวอย่างนี้แสดงภาพหน้าจอของเฟรม 195.5ms ในแท็บสรุป เมื่อคุณคลิกในส่วนเฟรม

คลิกภาพขนาดย่อในแท็บสรุปเพื่อซูมภาพหน้าจอ

ตัวอย่างนี้แสดงภาพหน้าจอที่ซูมเข้าหลังจากคลิกภาพปกในแท็บสรุป

ดูข้อมูลเลเยอร์

วิธีดูข้อมูลเลเยอร์ขั้นสูงเกี่ยวกับเฟรม

1. เปิดใช้การวัดผลการแสดงผลขั้นสูง
2. เลือกเฟรมในส่วนเฟรม เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อมูลเกี่ยวกับเลเยอร์ในแท็บเลเยอร์ใหม่ข้างแท็บบันทึกเหตุการณ์

วางเมาส์เหนือเลเยอร์เพื่อไฮไลต์ในไดอะแกรม

ตัวอย่างนี้แสดงเลเยอร์ #39 ที่ไฮไลต์เมื่อวางเมาส์เหนือเลเยอร์

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

• คลิกโหมดแพน เพื่อเลื่อนไปตามแกน X และ Y
• คลิกโหมดหมุน เพื่อหมุน ตามแกน Z
• คลิกรีเซ็ตการเปลี่ยนรูปแบบ เพื่อรีเซ็ตแผนภาพกลับไปยังตำแหน่งเดิม

ดูการวิเคราะห์เลเยอร์ในการใช้งานจริง

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

วิธีดูข้อมูลขั้นสูงเกี่ยวกับเหตุการณ์การระบายสี

1. เปิดใช้การวัดผลการแสดงผลขั้นสูง
2. เลือกเหตุการณ์ Paint ในแทร็กหลัก

วิเคราะห์ประสิทธิภาพการแสดงผลด้วยแท็บการแสดงผล

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

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

ดูเฟรมต่อวินาทีแบบเรียลไทม์ด้วยเครื่องวัด FPS

สถิติการแสดงผลเฟรมคือการวางซ้อนที่ปรากฏที่มุมขวาบนของวิวพอร์ต ซึ่งจะแสดงค่าประมาณ FPS แบบเรียลไทม์ขณะที่หน้าเว็บทำงาน

ดูสถิติการแสดงผลเฟรม

ดูเหตุการณ์การวาดภาพแบบเรียลไทม์ด้วยการกะพริบของภาพวาด

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

ดูการทาสีที่กะพริบ

ดูการซ้อนทับของเลเยอร์ด้วยเส้นขอบเลเยอร์

ใช้ขอบเขตเลเยอร์เพื่อดูการวางซ้อนของขอบเขตเลเยอร์และไทล์ที่ด้านบนของหน้า

ดูขอบเขตของเลเยอร์

ค้นหาปัญหาด้านประสิทธิภาพการเลื่อนแบบเรียลไทม์

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

ดูปัญหาด้านประสิทธิภาพการเลื่อน