เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome: การจัดทำโปรไฟล์ CPU ของ JavaScript ใน Chrome 58

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

เป้าหมายในระยะยาวคือการนำเครื่องมือสร้างโปรไฟล์ JavaScript CPU ตัวเก่าออกและให้ทุกคนทำงานร่วมกับเวิร์กโฟลว์ใหม่

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

การเข้าถึงเครื่องมือสร้างโปรไฟล์ JavaScript CPU รุ่นเก่า

หากต้องการใช้เวิร์กโฟลว์ "บันทึกโปรไฟล์ CPU ของ JavaScript" แบบเก่าซึ่งเคยใช้ได้ในแผงโปรไฟล์ คุณจะยังคงเข้าถึงได้โดยทำดังนี้

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

วิธีบันทึกโปรไฟล์ JS

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. คลิกแท็บประสิทธิภาพ

    แผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

    รูปที่ 1 แผงประสิทธิภาพ

  3. บันทึกด้วยวิธีใดวิธีหนึ่งต่อไปนี้

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

วิธีแมปเวิร์กโฟลว์เก่าเข้ากับเวอร์ชันใหม่

จากมุมมองแผนภูมิของเวิร์กโฟลว์เดิม ภาพหน้าจอด้านล่างจะแสดงตําแหน่งของแผนภูมิภาพรวมการใช้งาน CPU (ลูกศรด้านบน) และแผนภูมิเปลวไฟ (ลูกศรล่าง) ในเวิร์กโฟลว์ใหม่

การแมประหว่างแผนภูมิ Flame ในเวิร์กโฟลว์เก่ากับเวิร์กโฟลว์ใหม่

รูปที่ 2 การจับคู่ระหว่างแผนภูมิเปลวไฟในเวิร์กโฟลว์เก่า (ซ้าย) กับเวิร์กโฟลว์ใหม่ (ขวา)

มุมมองใหญ่ (ล่างขึ้น) จะมีอยู่ในแท็บล่างขึ้นบน ดังนี้

จับคู่ระหว่างมุมมองด้านล่างขึ้นในเวิร์กโฟลว์เก่ากับเวิร์กโฟลว์ใหม่

รูปที่ 3 การจับคู่ระหว่างมุมมองล่างขึ้นบนในเวิร์กโฟลว์เดิม (ซ้าย) กับเวิร์กโฟลว์ใหม่ (ขวา)

และมุมมองต้นไม้ (บนลงล่าง) จะมีอยู่ในแท็บแผนผังการเรียกใช้ ดังนี้

การแมประหว่างมุมมองแบบต้นไม้ในเวิร์กโฟลว์เดิมกับเวิร์กโฟลว์ใหม่

รูปที่ 4 การจับคู่ระหว่างมุมมองแบบต้นไม้ในเวิร์กโฟลว์เก่า (ซ้าย) กับเวิร์กโฟลว์ใหม่ (ขวา)