หน้านี้เป็นข้อมูลอ้างอิงแบบครอบคลุมเกี่ยวกับฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่เกี่ยวข้องกับการวิเคราะห์ประสิทธิภาพ
โปรดดูเริ่มต้นใช้งานการวิเคราะห์ประสิทธิภาพรันไทม์สำหรับบทแนะนำเกี่ยวกับวิธีวิเคราะห์ ประสิทธิภาพของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
บันทึกประสิทธิภาพ
คุณบันทึกรันไทม์หรือประสิทธิภาพในการโหลดได้
บันทึกประสิทธิภาพรันไทม์
บันทึกประสิทธิภาพรันไทม์เมื่อคุณต้องการวิเคราะห์ประสิทธิภาพของหน้าเว็บขณะที่หน้าเว็บทำงานอยู่ ตรงข้ามกับการโหลด
- ไปยังหน้าที่ต้องการวิเคราะห์
- คลิกแท็บประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกบันทึก
โต้ตอบกับหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกกิจกรรมหน้าเว็บทั้งหมดที่เกิดขึ้นเนื่องจาก การโต้ตอบ
คลิกบันทึกอีกครั้ง หรือคลิกหยุดเพื่อหยุดบันทึก
บันทึกประสิทธิภาพการโหลด
บันทึกประสิทธิภาพการโหลดเมื่อคุณต้องการวิเคราะห์ประสิทธิภาพของหน้าเว็บขณะที่กำลังโหลด เช่น ไม่ใช่การวิ่ง
- ไปยังหน้าที่ต้องการวิเคราะห์
- เปิดแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกเริ่มทำโปรไฟล์และโหลดหน้าเว็บซ้ำ อันดับแรกเครื่องมือสำหรับนักพัฒนาเว็บจะไปที่
about:blank
เพื่อล้างภาพหน้าจอและการติดตามที่เหลืออยู่ จากนั้น เครื่องมือสำหรับนักพัฒนาเว็บ บันทึกเมตริกประสิทธิภาพในขณะที่หน้าเว็บโหลดซ้ำ จากนั้นจะหยุดการบันทึก หลังจากที่การโหลดเสร็จสิ้น 2-3 วินาที
เครื่องมือสำหรับนักพัฒนาเว็บจะซูมเข้าโดยอัตโนมัติในส่วนการบันทึกที่เกิดกิจกรรมส่วนใหญ่
ในตัวอย่างนี้ แผงประสิทธิภาพจะแสดงกิจกรรมระหว่างการโหลดหน้าเว็บ
จับภาพหน้าจอขณะบันทึก
เปิดใช้ช่องทำเครื่องหมายภาพหน้าจอเพื่อจับภาพหน้าจอของทุกเฟรมขณะบันทึก
โปรดดูที่ดูภาพหน้าจอเพื่อเรียนรู้วิธีโต้ตอบกับภาพหน้าจอ
บังคับเก็บขยะขณะบันทึก
ขณะบันทึกหน้าเว็บ ให้คลิกเก็บขยะ เครื่องถูพื้นเพื่อบังคับให้เก็บขยะ
แสดงการตั้งค่าการบันทึก
คลิกการตั้งค่าการจับภาพ ถึง แสดงก��รตั้งค่า�������่ม�������มที่เกี่ยวข้องกับวิธีที่เค���ื่องมือสำหรับนักพัฒนาเว็บบันทึกประสิทธิภาพการทำงาน
ปิดใช้ตัวอย่าง JavaScript
โดยค่าเริ่มต้น แทร็กหลักของการบันทึกจะแสดง Call Stack ของ JavaScript โดยละเอียด ฟังก์ชันที่เรียกใช้ระหว่างการบันทึก หากต้องการปิดใช้สแต็กการเรียกใช้เหล่านี้ ให้ทำดังนี้
- เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
- เปิดใช้ช่องทำเครื่องหมายปิดใช้ตัวอย่าง JavaScript
- ถ่ายภาพหน้าที่บันทึกไว้
ภาพหน้าจอต่อไปนี้แสดงความแตกต่างระหว่างการปิดใช้และการเปิดใช้งานตัวอย่าง JavaScript แทร็กหลักของการบันทึกจะสั้นลงมากเมื่อปิดใช้การสุ่มตัวอย่าง เนื่องจากจะละเว้น สแต็กการเรียกใช้ JavaScript
ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่ปิดใช้
ตัวอย่างนี้แสดงการบันทึกที่มีตัวอย่าง JS ที่เปิดใช้
กดควบคุมเครือข่ายขณะบันทึก
หากต้องการควบคุมการเชื่อมต่อเครือข่ายขณะบันทึก ให้ทำดังนี้
- เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
- ตั้งค่าเครือข่ายเป็นระดับการควบคุมที่เลือก
ควบคุม CPU ขณะบันทึก
วิธีควบคุมการทำงานของ CPU ขณะบันทึก
- เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
- ตั้งค่า CPU เป็นระดับการควบคุมที่เลือก
การควบคุมจะสัมพันธ์กับความสามารถของคอมพิวเตอร์ เช่น ตัวเลือกช้าลง 2 เท่า ทำให้ CPU ทำงานช้ากว่าความสามารถปกติ 2 เท่า เครื่องมือสำหรับนักพัฒนาเว็บไม่สามารถจำลอง CPU ได้อย่างแท้จริง ของอุปกรณ์เคลื่อนที่ เนื่องจากสถาปัตยกรรม อุปกรณ์เคลื่อนที่แตกต่างจาก เดสก์ท็อปและแล็ปท็อป
เปิดใช้สถิติตัวเลือก CSS
หากต้องการดูสถิติของตัวเลือกกฎ CSS ระหว่างเหตุการณ์คำนวณรูปแบบใหม่ที่ใช้เวลานาน ให้ทำดังนี้
- เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
- เลือกช่องทำเครื่องหมายเปิดใช้สถิติตัวเลือก CSS
ดูรายละเอียดเพิ่มเติมได้จากวิธีวิเคราะห์ประสิทธิภาพของตัวเลือก CSS ระหว่างคำนวณเหตุการณ์รูปแบบใหม่
เปิดใช้การวัดคุมการแสดงผลขั้นสูง
วิธีดูการวัดคุมการแสดงผลอย่างละเอียด
- เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
- เลือกช่องทำเครื่องหมายเปิดใช้การวัดคุมการแสดงผลขั้นสูง
ดูวิธีการโต้ตอบกับข้อมูลการแสดงผลได้ที่ดูเลเยอร์และดูการแสดงผล เครื่องมือสร้างโปรไฟล์
จำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
หากต้องการทดสอบประสิทธิภาพของแอปพลิเคชันด้วยจำนวนแกนผู้ประมวลผลข้อมูล คุณสามารถกำหนดค่าที่พร็อพเพอร์ตี้ navigator.hardwareConcurrency
รายงานได้ แอปพลิเคชันบางรายการใช้พร็อพเพอร์ตี้นี้เพื่อควบคุมระดับการทำงานพร้อมกันของแอปพลิเคชัน เช่น เพื่อควบคุมขนาดกลุ่ม pthread ของ Emscripten
วิธีจำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
- เปิดเมนูการตั้งค่าการจับภาพ ดูแสดงการตั้งค่าการบันทึก
- เลือกการเกิดขึ้นพร้อมกันของฮาร์ดแวร์ แล้วกำหนดจำนวนแกนในช่องอินพุต
เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงไอคอนคำเตือน ข้างแท็บประสิทธิภาพเพื่อช่วยเตือนว่ามีการเปิดใช้การจำลองการเกิดขึ้นพร้อมกันของฮาร์ดแวร์
หากต้องการเปลี่ยนกลับเป็นค่าเริ่มต้น 10
ให้คลิกปุ่มเปลี่ยนกลับ
บันทึกไฟล์บันทึกเสียง
หากต้องการบันทึกการบันทึก ให้คลิกขวาและเลือกบ��นทึกโปรไฟล์
โหลดไฟล์บันทึกเสียง
หากต้องการโหลดการบันทึก ให้คลิกขวาและเลือกโหลดโปรไฟล์
ล้างการบันทึกก่อนหน้า
หลังจากอัดเสียงแล้ว ให้กดล้างการบันทึก เพื่อล้างการบันทึกนั้นออกจากแผงประสิทธิภาพ
วิเคราะห์การบันทึกประสิทธิภาพ
หลังจากที่คุณบันทึกประสิทธิภาพรันไทม์หรือบันทึกประสิทธิภาพการโหลดแล้ว ประสิทธิภาพ แผงนี้จะให้ข้อมูลมากมายสำหรับการวิเคราะห์ประสิทธิภาพของสิ่งที่เกิดขึ้น
ไปยังส่วนต่างๆ ของการบันทึก
ในการตรวจสอบการบันทึกประสิทธิภาพอย่างละเอียด คุณสามารถเลือกบางส่วนของการบันทึก เลื่อนแผนภูมิขนาดยาวเปลวไฟ ซูมเข้าและออก และใช้เบรดครัมบ์เพื่อข้ามไปมาระหว่างระดับการซูม
เลือกบางส่วนของการบันทึก
ใต้แถบการดำเนินการของแผงประสิทธิภาพและที่ด้านบนของการบันทึก คุณจะเห็นส่วนภาพรวมไทม์ไลน์ที่มีแผนภูมิ CPU และ NET
หากต้องการเลือกบางส่วนของการบันทึก ให้คลิกค้างไว้ จากนั้นลาก���ป��������้า��ห����อ����าในภาพรวมไทม์ไลน์
วิธีเลือกบางส่วนโดยใช้แป้นพิมพ์
- โฟกัสที่แทร็กหลักหรือเพื่อนบ้าน
- ใช้ปุ่ม W, A, S, D เพื่อซูมเข้า เลื่อนไปทางซ้าย ซูมออก และเลื่อนไปทางขวาตามลำดับ
วิธีเลือกส่วนต่างๆ โดยใช้แทร็กแพด
- วางเมาส์เหนือส่วนภาพรวมไทม์ไลน์หรือแทร็กใดๆ (หลักและเพื่อนบ้าน)
- ใช้ 2 นิ้วปัดขึ้นเพื่อซูมออก ปัดไปทางซ้ายเพื่อเลื่อนไปทางซ้าย ปัดลงเพื่อซูมเข้า และ เลื่อนไปทางขวาเพื่อเลื่อนไปทางขวา
สร้างเบรดครัมบ์และข้ามไปมาระหว่างระดับการซูม
ภาพรวมไทม์ไลน์ช่วยให้คุณสร้างเบรดครัมบ์ที่ซ้อนกันหลายรายการได้ต่อเนื่องกัน จากนั้นเพิ่มระดับการซูม แล้วข้ามไปยังระดับที่เลือก
วิธีสร้างและใช้เบรดครัมบ์มีดังนี้
- ในภาพรวมไทม์ไลน์ ให้เลือกบางส่วนของการบันทึก
- วางเมาส์เหนือรายการที่เลือกแล้วคลิกปุ่ม zoom_in N มิลลิวินาที โดยการเลือกจะขยายเพื่อเติมภาพรวมของไทม์ไลน์ ห่วงโซ่เบรดครัมบ์จะเริ่มสร้างขึ้นที่ด้านบนของภาพรวมไทม์ไลน์
- ทำซ้ำ 2 ขั้นตอนก่อนหน้าเพื่อสร้างเบรดครัมบ์ที่ซ้อนกันอีกรายการ คุณยังฝังเบรดครัมบ์ต่อได้ตราบใดที่ช่วงการเลือกมากกว่า 5 มิลลิวินาที
- หากต้องการข้ามไปยังระดับการซูมที่เลือก ให้คลิกเบรดครัมบ์ที่เกี่ยวข้องในเชนที่ด้านบนของภาพรวมไทม์ไลน์
เลื่อนแผนภูมิขนาดยาว
หากต้องการเลื่อนแผนภูมิ Flat แบบยาวในแทร็กหลักหรือเพื่อนบ้าน ให้คลิกค้างไว้แล้วลาก���ปในทิศทางใดก็ได้จนกว่าสิ่งที่คุณกำลังมองหาจะปรากฏขึ้น
ค้นหากิจกรรม
หากต้องการเปิดช่องค้นหาที่ด้านล่างของแผงประสิทธิภาพ ให้กดแป้นต่อไปนี้
- macOS: Command+F
- Windows, Linux: Control+F
ตัวอย่างนี้แสดงนิพจน์ทั่วไปในช่องค้นหาที่ด้านล���าง ซึ่งจะค้นหากิจกรรมใดๆ ที่ขึ้นต้นด้วย E
วิธีเลื่อนดูกิจกรรมที่ตรงกับคำค้นหา
- คลิกปุ่ม expand_less ก่อนหน้า หรือ expand_less ถัดไป
- กด Shift+Enter เพื่อเลือกก่อนหน้า หรือ Enter เพื่อเลือกรายการถัดไป
แผงประสิทธิภาพจะแสดงเคล็ดลับเครื่องมือเหนือกิจกรรมที่เลือกในช่องค้นหา
หากต้องการแก้ไขการตั้งค่าการค้นหา:
- คลิก match_case ตรงตามตัวพิมพ์ใหญ่-เล็ก เพื่อให้คำค้นหาตรงตามตัวพิมพ์ใหญ่-เล็ก
- คลิก regular_expression นิพจน์ทั่วไป เพื่อใช้นิพจน์ทั่วไปในการค้นหาของคุณ
หากต้องการซ่อนช่องค้นหา ให้คลิกยกเลิก
เปลี่ยนลำดับของแทร็กและซ่อนแทร็ก
คุณสามารถเปลี่ยนลำดับของแทร็กและซ่อนแทร็กที่ไม่เกี่ยวข้องในโหมดการกำหนดค่าแทร็กได้เพื่อจัดระเบียบการติดตามประสิทธิภาพ
หากต้องการย้ายและซ่อนแทร็ก ให้ทำดังนี้
- หากต้องการเข้าสู่โหมดการกำหนดค่า ให้คลิกขวาที่ชื่อแทร็กและเลือกกำหนดค่าแทร็ก
- คลิก arrow_upward ขึ้นหรือลง หรือ arrow_downward ลงเพื่อเลื่อนแทร็กขึ้นหรือลง คลิก visibility_off เพื่อซ่อน
- เมื่อเสร็จแล้ว ให้คลิกกำหนดค่าแทร็กให้เสร็จสิ้นด้านล่างเพื่อออกจากโหมดการกำหนดค่า
ดูวิดีโอเพื่อดูการทำงานของเวิร์กโฟลว์นี้
แผงประสิทธิภาพจะบันทึกการกำหนดค่าแทร็กสำหรับการติดตามใหม่ แต่ไม่บันทึกในเซสชันเ��รื่องมือสำหรับนักพัฒนาเว็บครั้งถัดไป
ดูกิจกรรมของเทรดหลัก
ใช้แทร็กหลักเพื่อดูกิจกรรมที่เกิดขึ้นในชุดข้อความหลักของหน้าเว็บ
คลิกกิจกรรมเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับกิจกรรมนั้นในแท็บสรุป แผงประสิทธิภาพจะสรุปเหตุการณ์ที่เลือกเป็นสีน้ำเงิน
ตัวอย่างนี้แสดงข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์การเรียกใช้ฟังก์ชัน 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 ในชุดข้อความหลัก คุณจะซ่อนฟังก์ชันที่เลือกหรือรายการย่อยได้โดยทำดังนี้
ในแทร็กหลัก ให้คลิกขวาที่ฟังก์ชันแล้วเลือกตัวเลือก���ดตัวเลือกหนึ่งต่อไปนี้ หรือกดแป้นพิมพ์ลัดที่เกี่ยวข้อง
- ซ่อนฟังก์ชัน (
H
) - ซ่อนรายการย่อย (
C
) - ซ่อนรายการย่อยที่ซ้ำ (
R
) - รีเซ็ตรายการย่อย (
U
) - รีเซ็ตการติดตาม (
T
) - เพิ่มสคริปต์ลงในรายการละเว้น (
I
)
ปุ่มแบบเลื่อนลง arrow_drop_down จะปรากฏขึ้นข้างชื่อฟังก์ชันที่มีรายการย่อยซ่อนอยู่
- ซ่อนฟังก์ชัน (
หากต้องการดูจำนวนรายการย่อยที่ซ่อนอยู่ ให้วางเมาส์เหนือปุ่มแบบเลื่อนลง arrow_drop_down
หากต้องการรีเซ็ตฟังก์ชันที่มีรายการย่อยซ่อนอยู่หรือแผนภูมิ 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
ดูการโต้ตอบ
ดูการโต้ตอบของผู้ใช้ในแทร็กการโต้ตอบเพื่อติดตามป����ห����าร�����บ���นองที่อาจเกิดขึ้น
วิธีดูการโต้ตอบ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าสาธิตนี้ เป็นต้น
- เปิดแผงประสิทธิภาพและเริ่มการบันทึก
- คลิกองค์ประกอบ (กาแฟ) และหยุดการบันทึก
- ค้นหาแทร็กการโต้ตอบในไทม์ไลน์
ในตัวอย่างนี้ แทร็กการโต้ตอบจะแสดงการโต้ตอบของตัวชี้ การโต้ตอบจะมีเครื่องหมายหนวดที่บ่งชี้ถึงความล่าช้าในการป้อนข้อมูลและการนำเสนอ ณ ขอบเขตเวลาในการประมวลผล วางเมาส์เหนือการโต้ตอบเพื่อดูเคล็ดลับเครื่องมือที่มีข้อมูลล่าช้า เวลาในการประมวลผล และการหน่วงเวลาการนำเสนอ
แทร็กการโต้ตอบยังแสดงคำเตือนการโต้ตอบกับ Next Paint (INP) สำหรับการโต้ตอบที่นานกว่า 200 มิลลิวินาทีในแท็บสรุป และในเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือรายการดังนี้
แทร็กการโต้ตอบจะทำเครื่องหมายการโต้ตอบที่นานกว่า 200 มิลลิวินาทีด้วยรูปสามเหลี่ยมสีแดงที่มุมขวาบน
ดูกิจกรรม GPU
ดูกิจกรรม GPU ในส่วน GPU
ดูกิจกรรมแรสเตอร์
ดูกิจกรรมแรสเตอร์ในส่วนกลุ่มเทรด
วิเคราะห์เฟรมต่อวินาที (FPS)
เครื่องมือสำหรับนักพัฒนาเว็บมีวิธีการวิเคราะห์เฟรมต่อวินาทีหลายวิธี ดังนี้
- ใช้ส่วนเฟรมเพื่อดูระยะเวลาที่เฟรมหนึ่งๆ ใช้
- ใช้เครื่องวัด FPS เพื่อประมาณ FPS แบบเรียลไทม์ขณะที่หน้าเว็บทำงาน โปรดดูที่ดูเฟรมต่อวินาที แบบเรียลไทม์ด้วยมาตรวัด FPS
ส่วนเฟรม
ส่วนเฟรมจะบอกให้คุณทราบถึงระยะเวลาที่เฟรมหนึ่งๆ ใช้
วางเมาส์เหนือเฟรมเพื่อดูเคล็ดลับเครื่องมือที่มีข้อมูลเพิ่มเติมเกี่ยวกับเฟรมนั้น
ตัวอย่างนี้แสดงเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือเฟรม
ส่วนเฟรมจะแสดงเฟรมได้ 4 ประเภทดังนี้
- กรอบไม่มีการใช้งาน (สีขาว) ไม่มีการเปลี่ยนแปลง
- กรอบ (สีเขียว) แสดงผลตามที่คาดไว้และตรงเวลา
- เฟรมที่นำเสนอบางส่วน (สีเหลืองที่มีลายเส้นประกว้างเล็กน้อย) Chrome พยายามอย่างเต็มที่ในการแสดงผลการอัปเดตภาพบางส่วนให้ทันเวลา เช่น ในกรณีที่การทำงานของเทรดหลักของกระบวนการแสดงผล (ภาพเคลื่อนไหว Canvas) มาล่าช้า แต่เทรดคอมโพสิต (การเลื่อน) เกิดขึ้นทันเวลา
- เฟรมตก (สีแดงที่มีลวดลายเส้นทึบหนาแน่น) 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
ในแท็บสรุปเมื่อคุณคลิกในส่วนเฟรม
คลิกภาพขนาดย่อในแท็บสรุปเพื่อซูมเข้าภาพหน้าจอ
ตัวอย่างนี้แสดงภาพหน้าจอแบบซูมเข้าหลังจากที่คุณคลิกภาพขนาดย่อในแท็บสรุป
ดูข้อมูลเลเยอร์
วิธีดูข้อมูลเลเยอร์ขั้นสูงเก��่ยวกับเฟรม
- เปิดใช้การวัดคุมการแสดงผลขั้นสูง
- เลือกเฟรมในส่วนเฟรม เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อมูลเกี่ยวกับเลเยอร์ในเครื่องมือสำหรับนักพัฒนาเว็บใน แท็บเลเยอร์ใหม่ ถัดจากแท็บบันทึกเหตุการณ์
วางเมาส์เหนือเลเยอร์เพื่อไฮไลต์ในแผนภาพ
ตัวอย่างนี้แสดงเลเยอร์ #39 ที่มีการไฮไลต์ไว้เมื่อคุณวางเมาส์เหนือเลเยอร์นั้น
วิธีย้ายแผนภาพ
- คลิกโหมดแพน เพื่อเคลื่อนที่ไปตามแกน X และ Y
- คลิกโหมดหมุน เพื่อหมุนเวียน ตามแกน Z
- คลิกรีเซ็ตการเปลี่ยนรูปแบบ เพื่อรีเซ็ตแผนภาพไปยังตำแหน่งเดิม
ดูการวิเคราะห์เลเยอร์ในสถานการณ์จริง
ดูเครื่องมือสร้างโปรไฟล์ของ Paint
หากต้องการดูข้อมูลขั้นสูงเกี่ยวกับเหตุการณ์การแสดงผล ให้ทําดังนี้
- เปิดใช้การวัดคุมการแสดงผลขั้นสูง
- เลือกเหตุการณ์ Paint ในแทร็กหลัก
วิเคราะห์ประสิทธิภาพการแสดงผลด้วยแท็บการแสดงผล
ใช้ฟีเจ��ร์ข��ง���ท���บ��ารแสดงผ��เพื่อช่วยแสดงภาพประสิทธิภาพในการแสดงผลของหน้าเว็บ
ดูเฟรมต่อวินาทีแบบเรียลไทม์ด้วยเครื่องวัด FPS
สถิติการแสดงเฟรมคือการวางซ้อนที่ปรากฏที่มุมขวาบนของวิวพอร์ต โดยจะแสดง FPS โดยประมาณแบบเรียลไทม์ขณะที่หน้าเว็บทํางาน
ดูเหตุการณ์ภาพวาดแบบเรียลไทม์ด้วย Paint Flashing
ใช้ Paint Flashing เพื่อดูแบบเรียลไทม์ของเหตุการณ์การวาดภาพทั้งหมดในหน้าเว็บ
ดูการวางซ้อนของเลเยอร์ด้วยเส้นขอบของเลเยอร์
ใช้เส้นขอบเลเยอร์เพื่อดูการวางซ้อนของเส้นขอบและชิ้นส่วนของเลเยอร์ที่ด้านบนของหน้า
ค้นหาปัญหาด้านประสิทธิภาพการเลื่อนแบบเรียลไทม์
ใช้ปัญหาเกี่ยวกับประสิทธิภาพการเลื่อนเพื่อระบุองค์ประกอบของหน้าที่มี Listener เหตุการณ์ซึ่งเกี่ยวข้องกับการเลื่อนซึ่งอาจเป็นอันตรายต่อประสิทธิภาพของหน้า เครื่องมือสำหรับนักพัฒนาเว็บอธิบายถึง องค์ประกอบที่อาจมีปัญหาสีทีล