เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome - การทำโปรไฟล์ CPU ของ JavaScript ใน Chrome 58
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ใน Chrome 58 ซึ่งปัจจุบันเป็น Canary เราได้เปลี่ยนชื่อแผงไทม์ไลน์เป็นแผงประสิทธิภาพ เปลี่ยนชื่อแผงโปรไฟล์เป็นแผงหน่วยความจำ และฟีเจอร์โปรไฟล์ CPU ของระเบียน JavaScript ในแผงโปรไฟล์ได้ย้ายไปยังตำแหน่งที่ซ่อนอยู่มากกว่า
เป้าหมายในระยะยาวคือการนําเครื่องมือสร้างโปรไฟล์ CPU ของ JavaScript ตัวเก่าออก และทำให้ทุกคนทำงานกับเวิร์กโฟลว์ใหม่ได้
คำแนะนำในการย้ายข้อมูลสั้นๆ นี้จะแสดงวิธีบันทึกโปรไฟล์ JS ในแผงประสิทธิภาพ และวิธีที่ UI ของแผงประสิทธิภาพแมปกับเวิร์กโฟลว์เดิมที่คุณคุ้นเคย
การเข้าถึงเครื่องมือสร้างโปรไฟล์ CPU ของ JavaScript เวอร์ชันเก่า
หากคุณต้องการเวิร์กโฟลว์ "บันทึกโปรไฟล์ CPU ของ JavaScript" แบบเดิมที่เคยมีในแผงโปรไฟล์ คุณก็ยังเข้าไปใช้งานได้โดยทำดังนี้
- เปิดเมนูหลักของเครื่องมือสำหรับนักพัฒนาเว็บ
- เลือกเครื่องมือเพิ่มเติม > JavaScript Profiler เครื่องมือสร้างโปรไฟล์เดิมจะเปิดขึ้น
ในแผงใหม่ที่ชื่อว่า JavaScript Profiler
วิธีบันทึกโปรไฟล์ JS
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกแท็บประสิทธิภาพ
ภาพที่ 1 แผงประสิทธิภาพ
บันทึกด้วยวิธีใดวิธีหนึ่งต่อไปนี้
- หากต้องการสร้างโปรไฟล์การโหลดหน้าเว็บ ให้คลิกบันทึกการโหลดหน้าเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บจะเริ่มบันทึกโดยอัตโนมัติ จากนั้นจะหยุดโดยอัตโนมัติเมื่อตรวจพบว่าหน้าโหลดเสร็จแล้ว
- หากต้องการสร้างโปรไฟล์หน้าเว็บที่กำลังทำงาน ให้คลิกบันทึก ดำเนินการต่างๆ ที่คุณต้องการสร้างโปรไฟล์ จากนั้นคลิกหยุดเมื่อดำเนินการเสร็จ
วิธีการจับคู่เวิร์กโฟลว์เดิมกับแบบใหม่
จากมุมมองแผนภูมิของเวิร์กโฟลว์เดิม ภาพหน้าจอด้านล่างจะแสดงตำแหน่งของแผนภูมิภาพรวมการใช้งาน CPU (ลูกศรด้านบน) และแผนภูมิ Flame Chart (ลูกศรด้านล่าง) ในเวิร์กโฟลว์ใหม่
รูปที่ 2 การจับคู่ระหว่างแผนภูมิ Flame ในเวิร์กโฟลว์เก่า (ซ้าย) และเวิร์กโฟลว์ใหม่ (ขวา)
มุมมองหนัก (ล่างขึ้น) จะมีอยู่ในแท็บล่างขึ้นบน ดังนี้
รูปที่ 3 การแมประหว่างมุมมองด้านล่างในเวิร์กโฟลว์เก่า (ซ้าย) และเวิร์กโฟลว์ใหม่ (ขวา)
และมุมมอง ต้นไม้ (บนลง) จะมีอยู่ในแท็บ Call Tree ดังนี้
รูปที่ 4 การแมประหว่างมุมมองต้นไม้ในเวิร์กโฟลว์เดิม (ซ้าย) และเวิร์กโฟลว์ใหม่ (ขวา)
ใช้คำสั่ง Ping @ChromeDevTools ใน Twitter หรือเปิดปัญหาเกี่ยวกับ GitHub ในที่เก็บเอกสารหากไม่พบฟีเจอร์ใดๆ หรือหากมีคำถามอื่นๆ เกี่ยวกับบทความนี้
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2016-12-15 UTC
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"ไม่มีข้อมูลที่ฉันต้องการ"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"ล้าสมัย"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ปัญหาเกี่ยวกับการแปล"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"อื่นๆ"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"เข้าใจง่าย"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"แก้ปัญหาของฉันได้"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"อื่นๆ"
}]
{"lastModified": "\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2016-12-15 UTC"}
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2016-12-15 UTC"],[],[]]
