มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

การปรับปรุงแผงประสิทธิภาพ

เวอร์ชันนี้มีการปรับปรุงหลายอย่างในแผงประสิทธิภาพ

ข้อมูลเชิงลึกใหม่เกี่ยวกับประสิทธิภาพ

แท็บประสิทธิภาพ > ข้อมูลเชิงลึกจะได้รับข้อมูลเชิงลึกใหม่ดังนี้

  • HTTP สมัยใหม่ที่ไฮไลต์คำขอที่ใช้โปรโตคอล HTTP/1.1 แบบเก่า
  • ใช้อายุการใช้งานแคชที่มีประสิทธิภาพซึ่งจะไฮไลต์คำขอที่อาจได้รับประโยชน์จากอายุการใช้งานแคชที่นานขึ้นและเพิ่มความเร็วในการโหลดเว็บไซต์
  • การแสดงแบบอักษรที่แสดงเวลาที่ประหยัดได้โดยประมาณหากคุณเพิ่มประสิทธิภาพ font-display

ข้อมูลเชิงลึกใหม่ 3 รายการในแท็บข้อมูลเชิงลึก

คลิกเพื่อไฮไลต์

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

เวลาในการตอบสนองของเซิร์ฟเวอร์ในสรุปคำขอเครือข่าย

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

ตาราง "เวลาในการตอบสนองของเซิร์ฟเวอร์" ในข้อมูลสรุปของคำขอเครือข่าย

แผงประสิทธิภาพจะใช้ข้อมูลจากส่วนหัวของServer-Timingการตอบกลับ

กรองคุกกี้ใน "ความเป็นส่วนตัวและความปลอดภัย"

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

ตัวกรองในตาราง "คุกกี้ของบุคคลที่สาม"

ขนาดในหน่วยกิโลไบต์ในตารางในแผงต่างๆ

ตารางในแผงเครือข่ายและหน่วยความจำ รวมถึงตาราง 1p / 3p ในประสิทธิภาพ > สรุป จะแสดงขนาดทั้งหมดเป็นกิโลไบต์ (kB) เพื่อให้หน่วยต่างๆ เหมือนกันในบริบทเดียวกัน ซึ่งช่วยให้คุณเปรียบเทียบตัวเลขในคอลัมน์เดียวกันและในกลุ่มต่างๆ ได้โดยตรง แทนที่จะต้องคอยดูหน่วย MB, kB และ B

ก่อนและหลังการรวมหน่วยขนาด

การเติมข้อความอัตโนมัติรองรับ corner-shape และ corner-*-shape ในองค์ประกอบ > รูปแบบ

ตอนนี้การเติมข้อความอัตโนมัติใน Elements > Styles สามารถแนะนำค่าที่สอดคล้องกันสำหรับพร็อพเพอร์ตี้ corner-shape และ corner-*-shape ได้แล้ว

ตัวเลือกการเติมข้อความอัตโนมัติสำหรับพร็อพเพอร์ตี้ "รูปร่างมุม"

ปัญหาใน Chromium: 402346406

ทดลอง: ไฮไลต์ปัญหาเกี่ยวกับองค์ประกอบและแอตทริบิวต์ใน DOM

ฟีเจอร์ทดลองใหม่นี้ช่วยให้แผงองค์ประกอบสามารถไฮไลต์ปัญหาเกี่ยวกับองค์ประกอบ DOM หรือแอตทริบิวต์ด้วยเส้นหยักสีแดงได้แล้ว วางเมาส์เหนือองค์ประกอบหรือแอตทริบิวต์ดังกล่าวเพื่อดูเคล็ดลับเครื่องมือที่มีลิงก์ไปยังข้อผิดพลาดที่เกี่ยวข้องในแผงปัญหา

การไฮไลต์ก่อนและหลังปัญหา DOM ในแผนผัง DOM ด้วยเคล็ดลับและลิงก์ไปยังแผงปัญหา

ปัจจุบันแผงองค์ประกอบจะไฮไลต์ลูกหลานที่ไม่ถูกต้องของ <select>, คำจำกัดความ ARIA ที่ไม่ตรงกัน และแอตทริบิวต์ ARIA ที่ไม่ถูกต้อง

ปัญหาใน Chromium: 378738916

Lighthouse 12.5.0

ตอนนี้แผง Lighthouse ใช้ Lighthouse 12.5.0 แล้ว

ในเวอร์ชันนี้ สิ่งที่สำคัญที่สุดคือตอนนี้ legacy-javascript ใช้ Baseline แทน esmodules แล้ว ดูรายการการเปลี่ยนแปลงทั้งหมด

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

ปัญหาใน Chromium: 40543651

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่น่าสนใจในรุ่นนี้มีดังนี้

  • ประสิทธิภาพ > ข้อมูลเชิงลึก > แผนผังการขึ้นต่อกันของเครือข่าย: ตอนนี้แสดงเวลาสำหรับคำขอเครือข่ายทั้งหมดในแผนผังเครือข่ายแล้ว (400708304)
    • แผนผังทรัพยากร Dependency ของเครือข่าย: ตอนนี้แสดงเวลาสำหรับคำขอเครือข่ายทั้งหมดในแผนผังเครือข่ายแล้ว (400708304)
  • ภาพเคลื่อนไหว: แก้ไขข้อบกพร่องที่ทำให้องค์ประกอบที่แยกออกมาปรากฏในแผงความทรงจำเนื่องจากภาพเคลื่อนไหวที่บันทึกไว้ 400635410
  • เครื่องบันทึก: ตอนนี้ใช้กล่องโต้ตอบการยืนยันเดียวกันกับการวางโค้ดเมื่อเรียกใช้การบันทึกเป็นครั้งแรก
  • เลเยอร์: ตอนนี้จะแสดงจำนวนเลเยอร์ทั้งหมดและหน่วยความจำทั้งหมดสำหรับเลเยอร์ที่มองเห็นได้ทั้งหมดในแถบสถานะที่ด้านล่าง
  • หน่วยความจำ: การเริ่มต้นสแนปชอตฮีปได้รับการเพิ่มประสิทธิภาพด้วยการทำงานแบบขนานระหว่าง 2 เวิร์กเกอร์แทนการใช้ 1 เวิร์กเกอร์ (42203857)
  • ปัญหา: ตอนนี้รายงานข้อผิดพลาด CORS ของการเข้าถึงเครือข่ายภายใน (LNA) แล้ว (395895368)
  • การช่วยเหลือพิเศษ:
    • เคล็ดลับเครื่องมือ: ตอนนี้จะปรากฏเมื่อกดฮอตคีย์แทนที่จะโฟกัส (396311936)
    • องค์ประกอบ > สไตล์: ตอนนี้คุณสามารถโต้ตอบกับฟังก์ชัน var() โดยใช้แป้นพิมพ์ได้แล้ว ซึ่งหมายความว่าคุณสามารถเลือก --custom-property แล้วกด Enter เพื่อไปยังเป้าหมายลิงก์ (401212692)

ดาวน์โหลดช่องตัวอย่าง

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

รายการทุกอย่างที่ครอบคลุมในซีรีส์มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ