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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ลิงก์ต้นทางและลิงก์สคริปต์สําหรับการเรียกโปรไฟล์และฟังก์ชันในประสิทธิภาพ

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

ลักษณะก่อนและหลังเพิ่มแหล่งที่มาและต้นทางลงในแท็บสรุป

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

ปัญหา Chromium: 368541957

การรองรับข้อมูลภาคสนาม "LCP ตามระยะ"

เมื่อเปิดข้อมูลภาคสนาม ข้อมูลเชิงลึกประสิทธิภาพ > ข้อมูลเชิงลึก > LCP ตามระยะจะแสดงเวลาในการโหลดรูปภาพตามเปอร์เซ็นต์ไทล์ 75 จากรายงาน UX ของ Chrome ในตารางเพิ่มเติม เพื่อให้คุณเปรียบเทียบเวลาในการโหลดได้ในข้อมูลเชิงลึก

ข้อมูลก่อนและหลังการเพิ่มการรองรับข้อมูลภาคสนามลงในข้อมูลเชิงลึก "LCP ตามระยะ"

ข้อมูลเชิงลึก "แผนผังทรัพยากร Dependency ของเครือข่าย"

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

ดูข้อมูลเพิ่มเติมได้ที่หลีกเลี่ยงคำขอสำคัญแบบลูกโซ่

การไฮไลต์สแต็กที่ใช้เวลาดำเนินการสูงสุด

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

มุมมองแบบต้นไม้ของการช่วยเหลือพิเศษในองค์ประกอบ

ตอนนี้มุมมองแผนผังการช่วยเหลือพิเศษแบบเต็มหน้าจะเปิดอยู่โดยค่าเริ่มต้นในแผงองค์ประกอบ ซึ่งช่วยให้คุณตรวจสอบวิธีที่เทคโนโลยีความช่วยเหลือพิเศษเห็นเนื้อหา รวมถึงแสดงแอตทริบิวต์ ARIA และพร็อพเพอร์ตี้การช่วยเหลือพิเศษที่คำนวณแล้วของโหนด DOM

หากต้องการเปิดมุมมองแบบต้นไม้ของการช่วยเหลือพิเศษ ให้คลิกปุ่ม เปลี่ยนเป็นมุมมองแบบต้นไม้ของการช่วยเหลือพิเศษที่มุมขวาบนของแผนผัง DOM ในแผงองค์ประกอบ

ลักษณะก่อนและหลังเปิดมุมมองแผนผังการช่วยเหลือพิเศษแบบเต็มหน้าโดยค่าเริ่มต้น

ดูข้อมูลเพิ่มเติมได้ที่แผนภาพการช่วยเหลือพิเศษแบบสมบูรณ์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ปัญหาเกี่ยวกับ Chromium: 40808541

ปรับปรุงสถานะว่างสำหรับแผงต่างๆ

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

ลักษณะก่อนและหลังการปรับปรุงสถานะว่างในแผงเครือข่ายและการค้นหา

ย้ายตัวเลือก "ถาม AI" ไปไว้ที่ด้านล่างของเมนู

ตอนนี้ตัวเลือกถาม AI จะอยู่ที่ด้านล่างของเมนูแบบเลื่อนลงแทนที่จะเป็นด้านบน

ลักษณะก่อนและหลังย้ายตัวเลือก "ถาม AI" ไปไว้ที่ด้านล่างของเมนูแบบเลื่อนลง

โปรดแสดงความคิดเห็นในแผงความช่วยเหลือจาก AI ใน crbug.com/364805393

Lighthouse 12.4.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 12.4.0

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

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

ปัญหา Chromium: 40543651

ไฮไลต์อื่นๆ

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

  • ประสิทธิภาพ > สรุป: แทนที่บรรทัดเวลาทั้งหมดและเวลาดำเนินการเอง 2 บรรทัดด้วยระยะเวลา 1 บรรทัดซึ่งจะแสดง (self time) ในวงเล็บด้วย (หากมี) (crbug.com/395572753)
  • ปัญหา: เพิ่มประเภทปัญหาใหม่ ได้แก่ ปัญหา <select> ในต้นไม้การช่วยเหลือพิเศษและข้อผิดพลาดเกี่ยวกับลายเซ็นข้อความ SRI ที่เกิดขึ้นระหว่างการแยกวิเคราะห์หรือการตรวจสอบในบริการเครือข่าย (crbug.com/381044049, crbug.com/347890366)
  • การช่วยเหลือพิเศษ: ตอนนี้แท็บองค์ประกอบ > สไตล์จะแสดงองค์ประกอบที่คุณไปยังส่วนต่างๆ โดยใช้การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ (crbug.com/396311936)
  • องค์ประกอบ: ตอนนี้ระบบรองรับปัญหาเกี่ยวกับ <select> และไฮไลต์ด้วยขีดล่างแบบหยัก (crbug.com/378738916)
  • เครือข่าย: ตอนนี้ไอคอน "จุดลบล้าง" และไอคอนคำเตือนเกี่ยวกับคุกกี้จะแสดงอยู่ทางด้านขวาของชื่อแท็บแทนที่จะเป็นด้านซ้าย (crbug.com/390556283)

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

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

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

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

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

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