คุ้นๆ ไหม คุณกำลังแก้ไขข้อบกพร่องด้านประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แต่ข้อมูลจำนวนมากในแผงประสิทธิภาพทำให้คุณโฟกัสเฉพาะส่วนที่เกี่ยวข้องและนําไปใช้ได้จริงได้ยาก ความยาวของไทม์ไลน์ ความลึกของแผนภูมิเปลวไฟ และจำนวนแทร็กข้อมูลจำนวนมากอาจทําให้การไปยังส่วนต่างๆ เป็นเรื่องยาก แม้ว่าแผงประสิทธิภาพจะมีประสิทธิภาพอย่างเหลือเชื่อ แต่ความมีประโยชน์ของแผงนี้ไม่ควรต้องแลกมาด้วยความสามารถในการใช้งาน
เมื่อเร็วๆ นี้เราได้เปิดตัวฟีเจอร์ใหม่ 3 รายการที่มุ่งลดความหนาแน่นของข้อมูลและช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งเวิร์กโฟลว์ของตนได้ ซึ่งเป็นส่วนหนึ่งของโครงการริเริ่มเพื่อปรับปรุงเครื่องมือด้านประสิทธิภาพของ Chrome
- ซ่อนส่วนที่ไม่เกี่ยวข้องของไทม์ไลน์
- ซ่อนส่วนที่ไม่เกี่ยวข้องของแผนภูมิเปลวไฟ
- ซ่อนแทร็กที่ไม่เกี่ยวข้อง
ในโพสต์นี้ เราจะเจาะลึกฟีเจอร์แต่ละรายการเหล่านี้และแสดงวิธีใช้ฟีเจอร์เพื่อมุ่งเน้นที่ข้อมูลที่สำคัญที่สุดเท่านั้น
ซ่อนส่วนที่ไม่เกี่ยวข้องของไทม์ไลน์
ประสิทธิภาพของเว็บทำงานในระดับมิลลิวินาที ดังนั้นแม้ว่าการบันทึกประสิทธิภาพจะยาวเพียงไม่กี่วินาที ก็มีโอกาสสูงที่จะเสียตำแหน่ง
ใน Chrome 122 เราได้เพิ่มความสามารถในการสร้างเบรดครัมบ์ ฟีเจอร์นี้ช่วยให้คุณจำกัดขอบเขตของไทม์ไลน์ได้ เพื่อให้คุณซูมหรือเลื่อนภายในพื้นที่ความสนใจที่คุณกำหนดไว้เท่านั้น การจำกัดไทม์ไลน์ด้วยวิธีนี้มีประโยชน์อย่างยิ่งหากคุณพยายามแก้ไขข้อบกพร่องเกี่ยวกับเวลาในการตอบสนอง เช่น เพื่อให้คุณมุ่งเน้นที่การโต้ตอบเดียวหรืองานที่ใช้เวลานานซึ่งมีปัญหา
ภาพหน้าจอก่อนหน้าแสดงภาพรวมไทม์ไลน์แบบใกล้ๆ ซึ่งแสดงภาพกิจกรรมของเธรดหลัก เช่น การดำเนินการสคริปต์และงานนำเสนอ เมื่อวางเคอร์เซอร์เหนือจุดดังกล่าว ปุ่มใหม่จะปรากฏขึ้นเพื่อกำหนดขอบเขตของไทม์ไลน์เป็นกรอบเวลาปัจจุบัน ปุ่มจะมีป้ายกำกับความกว้างของกรอบเวลาเป็นมิลลิวินาทีและไอคอน เบรดครัมบ์จะอยู่เหนือภาพรวมไทม์ไลน์ และแต่ละรายการจะมีป้ายกำกับตามขนาดของกรอบเวลา
วิธีใช้คุณลักษณะนี้
- ซูมและเลื่อนไทม์ไลน์ไปยังพื้นที่ที่ต้องการ
- คลิกไอคอนแว่นขยาย ในภาพรวมไทม์ไลน์เพื่อจำกัดไทม์ไลน์และตั้งค่าเบรดครัมบ์
- ทำซ้ำตามที่จำเป็นเพื่อซูมเข้าในพื้นที่ที่สนใจซึ่งซ้อนกัน
- คลิกเบรดครัมบ์เพื่อกลับไปที่พื้นที่ความสนใจก่อนหน้าหรือไทม์ไลน์ทั้งช่วง
การตัดไทม์ไลน์ช่วยให้คุณไม่ต้องเลื่อนออกไปนอกขอบเขตไปยังส่วนที่ไม่เกี่ยวข้องของไทม์ไลน์โดยไม่ตั้งใจ แต่หากต้องการ คุณก็สามารถคลิกเบรดครัมบ์เพื่อซูมกลับออกได้ ข้อดีอีกอย่างหนึ่งคือภาพรวมไทม์ไลน์จะยังคงสอดคล้องกับแทร็กต่อไปนี้ ซึ่งจะช่วยให้คุณเห็นโอกาสในการปรับปรุงประสิทธิภาพ เช่น การจัดเรียงใหม่แบบบังคับ และระบุสาเหตุของปัญหาในแผนภูมิเปลวไฟได้ง่ายขึ้น
ซ่อนส่วนที่ไม่เกี่ยวข้องของแผนภูมิ Flame Chart
การวิเคราะห์กิจกรรมของเธรดหลักไม่ใช่เรื่องง่าย ส่วนนี้ของแผงประสิทธิภาพเรียกว่าแผนภูมิเปลวไฟ เนื่องจากสแต็กการเรียกอาจยาวและบิดเบี้ยว ในบางกรณีที่รุนแรง สแต็กเหล่านี้อาจใช้งานยากจนทำให้เข้าใจภาพรวมและโฟกัสสิ่งที่พยายามเพิ่มประสิทธิภาพได้ยาก
ตั้งแต่ Chrome 124 เป็นต้นไป คุณสามารถปรับแต่งรายการในแผนภูมิเปลวไฟที่จะซ่อนได้ เพื่อให้คุณมุ่งเน้นที่ข้อมูลที่นําไปใช้ได้จริงมากที่สุด
เมื่อคลิกขวาที่ฟังก์ชันในแผนภูมิเปลวไฟ เมนูตามบริบทจะปรากฏขึ้นพร้อมตัวเลือกต่างๆ สำหรับการซ่อนรายการ ดังนี้
- ซ่อนฟังก์ชัน: นําฟังก์ชันที่เลือกออกจากแผนภูมิเปลวไฟ ฟังก์ชันย่อยจะเลื่อนขึ้นเพื่อปรากฏทันทีหลังฟังก์ชันหลัก
- ซ่อนรายการย่อย: ตัดแต่งแผนภูมิเปลวไฟที่ฟังก์ชันที่เลือก โดยซ่อนรายการย่อยทั้งหมดของฟังก์ชันนั้น
- ซ่อนรายการย่อยที่ซ้ำกัน: นําอินสแตนซ์ทั้งหมดของฟังก์ชันที่เลือกออกจากแผนภูมิเปลวไฟที่เหลือ
นอกจากนี้ คุณยังใช้แป้นพิมพ์ลัดที่เป็นประโยชน์หลายรายการได้เมื่อเลือกฟังก์ชันแล้ว ดังนี้
- H: ซ่อนฟังก์ชันที่เลือก
- C: ซ่อนรายการย่อยของฟังก์ชันที่เลือก
- R: ซ่อนอินสแตนซ์ของฟังก์ชันที่เลือกในภายหลังในกองซ้อน
- U: แสดงรายการย่อยที่ซ่อนอยู่ของฟังก์ชันที่เลือก
ซ่อนสคริปต์ที่ไม่เกี่ยวข้องอย่างถาวร
ตัวเลือกเพิ่มสคริปต์ลงในรายการละเว้นจะซ่อนฟังก์ชันที่เลือกจากแผนภูมิเปลวไฟ รวมถึงฟังก์ชันอื่นๆ ทั้งหมดที่กําหนดไว้ในไฟล์สคริปต์เดียวกัน ระบบจะเพิ่มสคริปต์ลงในรายการละเว้นด้วย ซึ่งโปรแกรมแก้ไขข้อบกพร่องของ DevTools จะใช้เพื่อข้ามฟังก์ชันและละเว้นข้อยกเว้นที่มาจากสคริปต์
สคริปต์ที่เพิ่มลงในรายการละเว้นจะยังคงอยู่ ดังนั้นระบบจะยังคงซ่อนสคริปต์เหล่านั้นจากผังเปลวไฟในการติดตามใหม่ สคริปต์ที่คุณไม่สามารถควบคุมได้ควรอยู่ในรายการละเว้น ในทางกลับกัน การซ่อนฟังก์ชันแต่ละรายการจะเป็นแบบชั่วคราวสำหรับร่องรอยปัจจุบันและขึ้นอยู่กับสถานการณ์มากกว่า เช่น คุณอาจต้องการซ่อนกองคําเรียกฟังก์ชันแบบซ้ำซ้อนที่ยุ่งยากเพื่อให้การติดตามทํางานได้ง่ายขึ้น
หากต้องการเปลี่ยนรายการที่ละเว้นหรือฟังก์ชันอื่นๆ ที่ซ่อนอยู่ในแผนภูมิเปลวไฟ ให้ใช้เมนูตามบริบทเพื่อรีเซ็ตฟังก์ชันย่อยของฟังก์ชันที่เลือก หรือรีเซ็ตฟังก์ชันที่ซ่อนทั้งหมดตลอดการติดตาม ฟังก์ชันที่มีรายการย่อยที่ซ่อนอยู่จะมีคำอธิบายประกอบด้วยไอคอน ▼ ซึ่งจะรีเซ็ตรายการย่อยเมื่อมีการคลิกด้วย
การลดความซับซ้อนและความลึกที่ไม่จำเป็นในแผนภูมิเปลวไฟจะช่วยให้แผนภูมินี้ใช้งานได้มากขึ้น ความสามารถในการปรับแต่งรายการที่คุณต้องการดูเป็นการเพิ่มประสิทธิภาพที่เหมาะกับสรีระเพื่อช่วยให้คุณมุ่งเน้นที่ข้อมูลที่สำคัญที่สุดสำหรับงานที่ทำอยู่ได้
ซ่อนแทร็กที่ไม่เกี่ยวข้อง
กิจกรรมของเธรดหลักจะประกอบขึ้นเป็นแทร็กเดียวของแผงประสิทธิภาพ แทร็กในแผงประสิทธิภาพจะแสดงภาพกิจกรรมของกระบวนการ และทั้งหมดจะสอดคล้องกับไทม์ไลน์เดียวกันเพื่อช่วยในการแก้ไขข้อบกพร่อง นอกจากแทร็กหลักแล้ว ยังมีแทร็กแยกต่างหากสำหรับเฟรมย่อย เทรด และเวิร์กเกอร์อื่นๆ ที่หน้าเว็บใช้ รวมถึงแทร็กเครือข่าย เฟรม ภาพเคลื่อนไหว และการโต้ตอบ แทร็กอื่นๆ อีกมากมายจะทําเครื่องหมายกิจกรรมของกระบวนการ Chrome ระดับล่าง เช่น IO, GPU และ Compositor ข้อมูลเยอะมาก อย่างไรก็ตาม สำหรับเวิร์กโฟลว์ด้านประสิทธิภาพส่วนใหญ่ คุณจะต้องสนใจเฉพาะข้อมูลจากแทร็ก 2-3 แทร็กในแต่ละครั้ง
ตั้งแต่ Chrome 125 เป็นต้นไป จะมีโหมดการกําหนดค่าใหม่ที่ให้คุณซ่อนแทร็กที่ไม่จําเป็นหรือจัดเรียงใหม่ได้ตามต้องการ เช่น หากกำลังเพิ่มประสิทธิภาพการโต้ตอบที่ช้า คุณอาจเลือกซ่อนทุกอย่างยกเว้นแทร็กการโต้ตอบ หลัก และ GPU
หากต้องการแก้ไขแทร็ก ให้คลิกขวาที่ชื่อของแทร็กใดก็ได้ แล้วเลือกกำหนดค่าแทร็ก… ซึ่งจะเปิดโหมดการกําหนดค่า ซึ่งคุณจะแสดง ซ่อน หรือจัดเรียงแทร็กแต่ละแทร็กใหม่ได้ คลิกปุ่มกําหนดค่าแทร็กให้เสร็จสิ้นเพื่อบันทึกค่ากําหนด
การกำหนดค่าแทร็กช่วยให้คุณควบคุมวิธีที่แผงประสิทธิภาพแสดงข้อมูลสำคัญในเวิร์กโฟลว์ได้ คุณสามารถใช้การตั้งค่าเหล่านี้เพื่อซ่อนกิจกรรมจากกระบวนการที่ไม่เกี่ยวข้อง และย้ายแทร็กไปยังตำแหน่งต่างๆ ในลักษณะที่ช่วยให้เข้าถึงข้อมูลที่ต้องการได้ง่ายที่สุด
สรุป
ฟีเจอร์ทั้ง 3 รายการนี้ให้คุณมีการควบคุมที่มีประสิทธิภาพและเหมาะกับสรีระแบบใหม่เพื่อปรับแต่งเวิร์กโฟลว์ด้านประสิทธิภาพ การใช้ฟีเจอร์เหล่านี้และลดปริมาณข้อมูลที่ไม่เกี่ยวข้องจะช่วยให้คุณค้นหาสิ่งที่ต้องการและทําความเข้าใจข้อมูลได้ดีขึ้น
เราอยากทราบว่าสิ่งใดใช้ได้ผลดีหรือวิธีปรับปรุงประสบการณ์การใช้งานของคุณ โปรดแจ้งให้เราทราบหากมีคำถามหรือความคิดเห็นทั่วไปโดยติดต่อ @ChromeDevTools หากพบปัญหาหรือมีคำแนะนำเกี่ยวกับฟีเจอร์ใหม่ๆ โปรดแสดงความคิดเห็นในปัญหาที่ยังไม่ได้รับการแก้ไขนี้
นี่เป็นเพียงจุดเริ่มต้นของโครงการริเริ่มเพื่อปรับปรุงเครื่องมือด้านประสิทธิภาพของ Chrome และเรายินดีที่จะแชร์ข้อมูลอื่นๆ ทั้งหมดที่เรากำลังพัฒนาเพื่อให้แผงประสิทธิภาพใช้งานได้ง่ายขึ้นและมีประสิทธิภาพมากขึ้นกว่าที่เคย เราจะเผยแพร่โพสต์ถัดไปซึ่งแสดงฟีเจอร์กลุ่มถัดไปที่นี่ในบล็อก Chrome สำหรับนักพัฒนาซอฟต์แวร์ ในระหว่างนี้ โปรดไปที่หน้ามีอะไรใหม่ใน Chrome เพื่อติดตามข่าวสารเกี่ยวกับฟีเจอร์ใหม่ทั้งหมดใน DevTools และ Chrome