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

Kayce Basques
Kayce Basques

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

เป้าหมายระยะยาวคือการนําเครื่องมือวิเคราะห์ CPU ของ JavaScript เวอร์ชันเก่าออก และทําให้ทุกคนทํางานด้วยเวิร์กโฟลว์ใหม่

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

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

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

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

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

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

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

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

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

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

เวิร์กโฟลว์แบบเก่าแมปกับแบบใหม่อย่างไร

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

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

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

มุมมองใช้ทรัพยากรมาก (ล่างขึ้นบน) มีอยู่ในแท็บล่างขึ้นบน

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

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

และมุมมองแผนภูมิต้นไม้ (จากบนลงล่าง) จะอยู่ในแท็บแผนภูมิการโทร

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

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