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