ใน Chrome 58 ซึ่งปัจจุบันเป็น Canary เราได้เปลี่ยนชื่อแผงไทม์ไลน์เป็นแผงประสิทธิภาพ เปลี่ยนชื่อแผงโปรไฟล์เป็นแผงหน่วยความจำ และฟีเจอร์โปรไฟล์ CPU ของระเบียน JavaScript ในแผงโปรไฟล์ได้ย้ายไปยังตำแหน่งที่ซ่อนอยู่มากกว่า
เป้าหมายในระยะยาวคือการนําเครื่องมือสร้างโปรไฟล์ CPU ของ JavaScript ตัวเก่าออก และทำให้ทุกคนทำงานกับเวิร์กโฟลว์ใหม่ได้
คำแนะนำในการย้ายข้อมูลสั้นๆ นี้จะแสดงวิธีบันทึกโปรไฟล์ JS ในแผงประสิทธิภาพ และวิธีที่ UI ของแผงประสิทธิภาพแมปกับเวิร์กโฟลว์เดิมที่คุณคุ้นเคย
การเข้าถึงเครื่องมือสร้างโปรไฟล์ CPU ของ JavaScript เวอร์ชันเก่า
หากคุณต้องการเวิร์กโฟลว์ "บันทึกโปรไฟล์ CPU ของ JavaScript" แบบเดิมที่เคยมีในแผงโปรไฟล์ คุณก็ยังเข้าไปใช้งานได้โดยทำดังนี้
- เปิดเมนูหลักของเครื่องมือสำหรับนักพัฒนาเว็บ
- เลือกเครื่องมือเพิ่มเติม > JavaScript Profiler เครื่องมือสร้างโปรไฟล์เดิมจะเปิดขึ้น ในแผงใหม่ที่ชื่อว่า JavaScript Profiler
วิธีบันทึกโปรไฟล์ JS
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกแท็บประสิทธิภาพ
ภาพที่ 1 แผงประสิทธิภาพ บันทึกด้วยวิธีใดวิธีหนึ่งต่อไปนี้
- หากต้องการสร้างโปรไฟล์การโหลดหน้าเว็บ ให้คลิกบันทึกการโหลดหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะเริ่มบันทึกโดยอัตโนมัติ จากนั้นจะหยุดโดยอัตโนมัติเมื่อตรวจพบว่าหน้าโหลดเสร็จแล้ว
- หากต้องการสร้างโปรไฟล์หน้าเว็บที่กำลังทำงาน ให้คลิกบันทึก ดำเนินการต่างๆ ที่คุณต้องการสร้างโปรไฟล์ จากนั้นคลิกหยุดเมื่อดำเนินการเสร็จ
วิธีการจับคู่เวิร์กโฟลว์เดิมกับแบบใหม่
จากมุมมองแผนภูมิของเวิร์กโฟลว์เดิม ภาพหน้าจอด้านล่างจะแสดงตำแหน่งของแผนภูมิภาพรวมการใช้งาน CPU (ลูกศรด้านบน) และแผนภูมิ Flame Chart (ลูกศรด้านล่าง) ในเวิร์กโฟลว์ใหม่
มุมมองหนัก (ล่างขึ้น) จะมีอยู่ในแท็บล่างขึ้นบน ดังนี้
และมุมมอง ต้นไม้ (บนลง) จะมีอยู่ในแท็บ Call Tree ดังนี้
ใช้คำสั่ง Ping @ChromeDevTools ใน Twitter หรือเปิดปัญหาเกี่ยวกับ GitHub ในที่เก็บเอกสารหากไม่พบฟีเจอร์ใดๆ หรือหากมีคำถามอื่นๆ เกี่ยวกับบทความนี้