เครื่องมือสำหรับนักพัฒนาเว็บใน 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 การแมประหว่างมุมมองแบบต้นไม้ในเวิร์กโฟลว์เก่า (ซ้าย) กับเวิร์กโฟลว์ใหม่ (ขวา)

โปรดใช้คำสั่ง ping @ChromeDevTools ใน Twitter หรือเปิดปัญหาเกี่ยวกับ GitHub ในที่เก็บเอกสารหากเราพลาดฟีเจอร์ใดไป หรือหากมีคำถามอื่นๆ เกี่ยวกับบทความนี้