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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

ปัญหาใน Chromium: 368541957

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่หลีกเลี่ยงการเชนคำขอที่สำคัญ

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

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

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

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

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

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

Accessibility Tree ช่วยให้คุณตรวจสอบวิธีที่เทคโนโลยีความช่วยเหลือมองเห็นเนื้อหาของคุณ และแสดงแอตทริบิวต์ ARIA และพร็อพเพอร์ตี้การช่วยเหลือพิเศษที่คำนวณแล้วของโหนด 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 หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

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

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

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

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