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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

Brendan Kenny

เผยแพร่: 19 มีนาคม 2025

เรายินดีที่จะประกาศการอัปเกรดเพิ่มเติมเกี่ยวกับวิธีโต้ตอบกับแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อสานต่อโครงการริเริ่มเพื่อปรับปรุงเครื่องมือด้านประสิทธิภาพของ Chrome การปรับปรุงเหล่านี้ออกแบบมาเพื่อเพิ่มความสามารถในการไปยังส่วนต่างๆ ของร่องรอยประสิทธิภาพและลดข้อมูลที่ไม่เกี่ยวข้อง เพื่อให้คุณมุ่งเน้นการติดตามและแก้ไขปัญหาด้านประสิทธิภาพได้อย่างรวดเร็ว

การนําทางที่ปรับปรุงให้ดีขึ้น

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

ตัวเลือกใหม่ในส่วนความช่วยเหลือช่วยให้คุณสลับระหว่างการเลื่อนแบบ "คลาสสิก" ที่มีอยู่กับการเลื่อนแบบ "โมเดิร์น" ใหม่ได้

ในโหมดคลาสสิก การเลื่อน (โดยใช้แทร็กแพดหรือปุ่มลูกกลิ้ง) จะซูมเข้าและออกอย่างต่อเนื่อง ขณะที่การกด Shift ค้างไว้แล้วเลื่อนจะเป็นการเลื่อนแผนภูมิเปลวไฟขึ้นและลง

ในโหมดโมเดิร์นใหม่ แป้นเหล่านี้จะทำงานกลับกัน นั่นคือการเลื่อนจะเลื่อนแผนภูมิเปลวไฟ ส่วนแป้น Shift และการเลื่อนจะซูมเข้าและออก

แป้นพิมพ์ลัด (เช่น การใช้ WASD เพื่อไปยังส่วนต่างๆ ของร่องรอย) จะยังคงทำงานต่อไปโดยไม่มีการเปลี่ยนแปลง

ภาพรวมแบบ 2 ทิศทาง

แผนภูมิ CPU อยู่ใกล้กับด้านบนของแผงประสิทธิภาพ ซึ่งเป็นส่วนหนึ่งของภาพรวมไทม์ไลน์ โดยจะแสดงค่าประมาณของการใช้งาน CPU ระหว่างการบันทึกการติดตาม โดยแจกแจงตามประเภทงาน (เช่น สีส้มสําหรับการเรียกใช้สคริปต์ สีม่วงสําหรับการดำเนินการแสดงผล)

ซึ่งจะแสดงภาพรวมของการติดตาม ซึ่งบางครั้งเรียกว่าแผนที่ขนาดเล็ก โดยจะแสดงข้อมูลสรุประดับสูงของไทม์ไลน์ทั้งหมดแม้ว่าคุณจะซูมเข้าไปตรวจสอบปัญหาบางอย่างก็ตาม

อย่างไรก็ตาม คุณอาจหลงทางในแผนที่ขนาดเล็กได้ง่ายๆ เมื่อดูร่องรอยเป็นหลัก และในทางกลับกัน เราจึงเปิดตัวฟีเจอร์ใหม่ที่จะช่วยเชื่อมโยงภาพรวมกับมุมมองแบบซูมเข้า ตอนนี้เมื่อคุณวางเมาส์เหนือภาพรวม เส้นแนวตั้งที่เกี่ยวข้องจะปรากฏในผัง Flame Chart เพื่อระบุจุดเวลาเดียวกันในผัง Flame Chart

ในทำนองเดียวกัน ตอนนี้การวางเมาส์เหนือรายการในผัง Flame จะไฮไลต์ส่วนที่เกี่ยวข้องของแผนภูมิ CPU ซึ่งมีประโยชน์อย่างยิ่งในการดูว่างานใดที่ทําให้ CPU เพิ่มขึ้น

กรองการติดตาม

การแก้ไขข้อบกพร่องด้านประสิทธิภาพมักจะเกี่ยวข้องกับการกรองข้อมูลจํานวนมาก เราได้ปรับปรุงความสามารถในการกรองสัญญาณรบกวนออกเพื่อช่วยให้คุณมุ่งเน้นที่ข้อมูลที่เกี่ยวข้องมากที่สุด

เมื่อปีที่แล้ว เราได้เปิดตัวความสามารถในการเพิ่มสคริปต์ในแผงประสิทธิภาพลงในรายการที่ DevTools ละเว้น ซึ่งจะกรองรายการที่เกี่ยวข้องน้อยลงในผัง Flame เช่น หากคุณกำลังแก้ไขข้อบกพร่องเกี่ยวกับประสิทธิภาพของคอมโพเนนต์ในหน้าเว็บ การแสดงสแต็กการเรียกของเฟรมเวิร์กอาจรบกวนคุณหากมีลําดับชั้นมากพอจนคุณต้องเลื่อนแผงประสิทธิภาพขึ้นและลง และคุณมักจะต้องการยุบสแต็กการเรียกส่วนใหญ่เพื่อมุ่งเน้นที่ส่วนสําคัญ

คุณสามารถคลิกขวาที่รายการในผังเฟรมแล้วเลือกเพิ่มสคริปต์ลงในรายการที่ละเว้น ซึ่งจะเพิ่มสคริปต์ลงในรายการที่ละเว้นของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ และยุบรายการทั้งหมดจากสคริปต์นั้นในผังเฟรม

แต่ตอนนี้คุณยังแก้ไขรายการที่ละเว้นด้วยตนเองได้โดยตรงจากบีบอัดที่ด้านบนของแผงประสิทธิภาพ ระบบจะแชร์นิพจน์ทั่วไปของรายการละเว้นในเครื่องมือสำหรับนักพัฒนาเว็บ ดังนั้นระบบจะข้ามสคริปต์ที่ตรงกันเมื่อแก้ไขข้อบกพร่องในแผงแหล่งที่มาและยุบเป็นรายการเดียวในแผนภูมิ Flame Chart และรายการจะคงอยู่ในเซสชันเครื่องมือสำหรับนักพัฒนาเว็บ

วิธีนี้จะช่วยให้คุณควบคุมไฟล์ที่จะละเว้นได้อย่างละเอียด และยังเป็นที่ที่สะดวกในการเปิดและปิดใช้กฎขณะทำงาน

ลดความโดดเด่นของสคริปต์ของบุคคลที่สาม

สคริปต์ของบุคคลที่สามเป็นองค์ประกอบที่พบได้ทั่วไปในเว็บไซต์ แต่มักอยู่นอกเหนือการควบคุมของเราหรือไม่เกี่ยวข้องกับเซสชันการแก้ไขข้อบกพร่องหนึ่งๆ ตัวเลือก check_box Dim 3rd parties ใหม่ที่อยู่ด้านบนของแผงประสิทธิภาพจะทําให้สคริปต์ของบุคคลที่สามและกิจกรรมเครือข่ายในไทม์ไลน์เป็นสีเทา ซึ่งจะลดความกระจัดกระจายของภาพและช่วยให้คุณมุ่งเน้นที่การมีส่วนร่วมด้านประสิทธิภาพของบุคคลที่หนึ่งได้

แต่บางครั้งคุณก็ต้องการการควบคุมที่มากขึ้น เช่น มุ่งเน้นที่บุคคลที่สามบางราย หรือแม้แต่การมีส่วนร่วมจาก API หรือ CDN ของคุณเองเท่านั้น ที่ด้านล่างของแผงในแท็บสรุปคือรายละเอียดของบุคคลที่หนึ่งและบุคคลที่สามที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์พบในหน้าเว็บ การวางเมาส์เหนือเอนทิตีแต่ละรายการในรายการจะทำให้กิจกรรมที่ไม่ได้มาจากเอนทิตีนั้นเปลี่ยนเป็นสีเทา

บทสรุป

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