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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

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

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

บังคับเก็บขยะขณะบันทึก

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

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

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

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

โดยค่าเริ่มต้น แทร็กหลักของการบันทึกจะแสดง Call Stack ของ 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 ระหว่างคำนวณเหตุการณ์รูปแบบใหม่

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

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

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

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

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

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

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

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

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

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

บันทึกไฟล์บันทึกเสียง

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

โหลดไฟล์บันทึกเสียง

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

ล้างการบันทึกก่อนหน้า

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

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

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

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

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

เลือกบางส่วนของการบันทึก

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

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

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

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

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

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

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

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

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

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

เลื่อนแผนภูมิขนาดยาว

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

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

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

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

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

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

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

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

หากต้องการแก้ไขการตั้งค่าการค้นหา:

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

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

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

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

หากต้องการย้ายและซ่อนแทร็ก ให้ทำดังนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 ตรงทั้งคำ

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

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

กิจกรรมรูท

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูช่วงเวลา

ในการติดตามการจับเวลา ให้ดูเครื่องหมายสําคัญต่างๆ เช่น

• การแสดงผลครั้งแรก (FP)
• การแสดงผลเนื้อหาเต็มครั้งแรก (FCP)
• การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP)
• เหตุการณ์ DOMContentLoaded (DCL)
• เหตุการณ์ในการโหลด (L)
• การโทรที่กำหนดเองจาก performance.mark() เครื่องหมายแต่ละรายการที่มีเคล็ดลับเครื่องมือแสดงอยู่ด้านล่างที่ 813.44 มิลลิวินาที ซึ่งมีป้ายกํากับว่ากําลังเริ่มต้นใช้งาน JavaScript
• การโทรที่กำหนดเองจาก performance.measure() ช่วงสีเหลืองจะแสดงด้านล่างโดยมีป้ายกำกับการโต้ตอบช้า

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

ดูการโต้ตอบ

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

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

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

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

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

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

ดูกิจกรรม GPU

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

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

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

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

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

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

ส่วนเฟรม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูภาพหน้าจอ

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูการวิเคราะห์เลเยอร์ในสถานการณ์จริง

ดูเครื่องมือสร้างโปรไฟล์ของ Paint

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

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

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

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

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

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

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

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

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

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

ดูการกะพริบของสี

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

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

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

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

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

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