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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ขนาดในหน่วย KB ในตารางในแผงต่างๆ

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

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

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

ตอนนี้การเติมข้อความอัตโนมัติในองค์ประกอบ > สไตล์จะแนะนำค่าที่สอดคล้องกันสำหรับพร็อพเพอร์ตี้ corner-shape และ 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 จะใช้พื้นฐานแทน esmodules ดูรายการการเปลี่ยนแปลงทั้งหมด

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

ปัญหา Chromium: 40543651

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools