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

Kayce Basques

Sofia Emelianova

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

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

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

คุณบันทึกรันไทม์หรือประสิทธิภาพการโหลดได้

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

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

1. ไปยังหน้าที่ต้องการวิเคราะห์
2. คลิกแท็บประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ

3. คลิกบันทึก

   

4. โต้ตอบกับหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกกิจกรรมหน้าเว็บทั้งหมดที่เกิดจากการโต้ตอบของคุณ

5. คลิกบันทึกอีกครั้งหรือคลิกหยุดเพื่อหยุดบันทึก

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

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

1. ไปยังหน้าที่ต้องการวิเคราะห์
2. เปิดแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ

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

   

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

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

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

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

โปรดดูที่ดูภาพหน้าจอเพื่อเรียนรู้วิธีโต้ตอบกับภาพหน้าจอ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีดูการวัดคุมการแสดงผลอย่างละเอียด

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

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

จำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์

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

วิธีจําลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์

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

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

หากต้องการเปลี่ยนกลับเป็นค่าเริ่มต้น 10 ให้คลิกปุ่มเปลี่ยนกลับ

บันทึกไฟล์บันทึก

หากต้องการบันทึกการบันทึก ให้คลิกขวาและเลือกบันทึกโปรไฟล์

โหลดไฟล์บันทึก

หากต้องการโหลดการบันทึก ให้คลิกขวาและเลือกโหลดโปรไฟล์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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. เมื่อเสร็จแล้ว ให้คลิกกำหนดค่าแทร็กให้เสร็จสิ้นด้านล่างเพื่อออกจากโหมดการกำหนดค่า

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

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

ดูกิจกรรมชุดข้อความหลัก

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

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

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

อ่านแผนภูมิเปลวไฟ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: 3 ส่วนถัดไปทั้งหมดเป็นการสาธิตเดียวกัน คุณเรียกใช้การสาธิตด้วยตนเองได้ที่การสาธิตแท็บกิจกรรม และดูแหล่งที่มาได้ที่ GoogleChrome/devtools-samples/perf/activitytabs.html

กิจกรรมรูท

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

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

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

ดูแท็บ Call Tree เพื่อดูตัวอย่างกิจกรรมรูท

แท็บแผนผังการโทร

ใช้แท็บ Call Tree เพื่อดูว่ากิจกรรมรูทใดทำให้ได้ผลมากที่สุด

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

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

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

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

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

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

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

แท็บด้านล่างสุด

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

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

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

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

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

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

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

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

คอลัมน์เวลาเริ่มต้นแสดงเวลาที่กิจกรรมดังกล่าวเริ่มต้นขึ้น เมื่อเทียบกับการเริ่มต้นการบันทึก เวลาเริ่มต้น 1573.0 ms ของรายการที่เลือกในตัวอย่างนี้หมายความว่ากิจกรรมเริ่มต้นขึ้น 1573 มิลลิวินาทีหลังจากที่การบันทึกเริ่มต้น

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

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

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

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

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

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

ดูช่วงเวลา

ในแทร็กช่วงเวลา ให้ดูเครื่องหมายสำคัญ เช่น

• First Paint (FP)
• การแสดงผลเนื้อหาเต็มครั้งแรก (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 มิลลิวินาทีด้วยสามเหลี่ยมสีแดงที่มุมขวาบน

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

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

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

ดูกิจกรรมแรสเตอร์ในส่วนกลุ่มเทรด

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

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

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

ส่วนเฟรม

ส่วนเฟรมจะบอกให้คุณทราบถึงระยะเวลาที่เฟรมหนึ่งๆ ใช้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รายละเอียดทั้ง 2 แบบเชื่อมโยงกัน ดังนี้

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

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

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

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

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

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

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

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

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

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

ดูภาพหน้าจอ

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูการทํางานของการวิเคราะห์เลเยอร์

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

หากต้องการดูข้อมูลขั้นสูงเกี่ยวกับเหตุการณ์การแสดงผล ให้ทําดังนี้

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

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

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

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

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

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

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

ดูเหตุการณ์ภาพวาดแบบเรียลไทม์ด้วย Paint Flashing

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

ดูการกะพริบในการแสดงผล

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

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

ดูเส้นขอบของเลเยอร์

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

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

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