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

Sofia Emelianova
Sofia Emelianova
GitHub

ทำความเข้าใจข้อผิดพลาดและคำเตือนในคอนโซลได้ดียิ่งขึ้นด้วย Gemini

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

หากต้องการดูคำอธิบายข้อผิดพลาดหรือคำเตือนที่ AI สร้างขึ้น ให้คลิกปุ่มไอเดียผุดขึ้น ทำความเข้าใจข้อผิดพลาด (คำเตือน) นี้ข้างข้อความในคอนโซล แล้วทำตามวิธีการ

คำอธิบายข้อผิดพลาดที่ AI สร้างขึ้น

ดูข้อมูลเพิ่มเติมได้ที่ทำความเข้าใจข้อผิดพลาดและคำเตือนได้ดียิ่งขึ้นด้วย AI

@position-try รองรับกฎใน Elements > Styles

ตอนนี้แท็บองค์ประกอบ > รูปแบบรองรับ@position-tryกฎ CSS แล้ว เพื่อช่วยคุณแก้ไขข้อบกพร่องของการจัดตำแหน่งยึด CSS แท็บจะแสดงค่า position-try-options และลิงก์แต่ละตัวเลือกไปยังส่วน @position-try --name ที่เกี่ยวข้อง

ก่อนและหลังที่รองรับกฎ CSS @position-try

ดูข้อมูลเพิ่มเติมได้ที่ขอแนะนำ API การจัดตำแหน่งยึด CSS

ปัญหาใน Chromium: 40279608

การปรับปรุงแผงแหล่งที่มา

เวอร์ชันนี้มีการปรับปรุงแผงแหล่งที่มาหลายอย่าง

กำหนดค่าการจัดรูปแบบโค้ดอัตโนมัติและการปิดวงเล็บ

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

หากต้องการกำหนดค่าลักษณะการทำงานที่เกี่ยวข้อง ให้เลือกหรือยกเลิกการเลือกตัวเลือก Auto closing brackets และ Automatically pretty print minified sources ใน การตั้งค่า > ค่ากำหนด > แหล่งที่มา

ก่อนและหลังเพิ่มการตั้งค่าใหม่สำหรับการจัดรูปแบบโค้ดอัตโนมัติและการปิดวงเล็บ

ปัญหาเกี่ยวกับ Chromium: 40865010, 324314570

ระบบจะถือว่าสัญญาที่ถูกปฏิเสธซึ่งมีการจัดการเป็นสัญญาที่แคช

ตอนนี้แผงแหล่งที่มาจะรับรู้สัญญาที่ถูกปฏิเสธอย่างถูกต้องว่าถูกจับได้ หากคุณจัดการสัญญาเหล่านั้นด้วย .catch() หรือ .then() ที่มีอาร์กิวเมนต์ 2 รายการ

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

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

ก่อนและหลังการรับรู้การปฏิเสธที่ตรวจพบ

ปัญหาใน Chromium: 40283993

สาเหตุของข้อผิดพลาดในคอนโซล

ตอนนี้ Console จะแสดงเชนของสาเหตุของข้อผิดพลาดใน Stack Trace (หากมี)

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

การพิมพ์ Stack Trace ก่อนและหลังที่มีคำนำหน้า `Caused by`

ปัญหาใน Chromium: 40182832

การปรับปรุงแผงเครือข่าย

เวอร์ชันนี้มีการปรับปรุงแผงเครือข่ายหลายอย่าง

ตรวจสอบส่วนหัวของคำแนะนำเบื้องต้น

ส่วนหัวคำแนะนำเบื้องต้นจะมีส่วนเฉพาะในแท็บส่วนหัวของคำขอในแผงเครือข่าย ก่อนหน้านี้ คุณจะเห็นส่วนหัวที่เกี่ยวข้องในส่วนส่วนหัวการตอบกลับ

คำแนะนำเบื้องต้นคือรหัสสถานะ HTTP (103 Early Hints) ที่ใช้เพื่อส่งการตอบกลับ HTTP เบื้องต้นก่อนการตอบกลับสุดท้าย ซึ่งช่วยให้เซิร์ฟเวอร์ส่งคำแนะนำไปยังเบราว์เซอร์เกี่ยวกับทรัพยากรย่อยที่สำคัญ (เช่น ชีตสไตล์หรือ JavaScript ที่สำคัญ) หรือต้นทางที่หน้าเว็บน่าจะใช้ ในขณะที่เซิร์ฟเวอร์กำลังสร้างทรัพยากรหลัก

ก่อนและหลังการเพิ่มส่วนเฉพาะสำหรับคำแนะนำเบื้องต้น

ดูข้อมูลเพิ่มเติมได้ที่โหลดหน้าเว็บได้เร็วขึ้นโดยใช้เวลาคิดของเซิร์ฟเวอร์กับคำแนะนำเบื้องต้น

ปัญหาใน Chromium: 40222701

ซ่อนคอลัมน์น้ำตก

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

ก่อนและหลังเพิ่มตัวเลือกเพื่อซ่อนคอลัมน์น้ำตก

ปัญหาใน Chromium: 40574989

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

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

บันทึกสถิติตัวเลือก CSS

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

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

สถิติก่อนและหลังการเพิ่มตัวเลือก

ปัญหาใน Chromium: 324282954

เปลี่ยนลำดับและซ่อนแทร็ก

แผงประสิทธิภาพมีโหมดการกำหนดค่าใหม่ที่ให้คุณเปลี่ยนลำดับของแทร็กและซ่อนแทร็กได้

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

Chrome เวอร์ชันถัดไป ซึ่งก็คือ Chrome 126 จะมีการปรับปรุง UI นี้เพิ่มเติม

ปัญหาใน Chromium: 311439339

ละเว้นเครื่องมือเก็บในแผงหน่วยความจำ

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

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

ก่อนและหลังเพิ่มตัวเลือกเพื่อไม่สนใจค่าบริการคงที่

นอกจากนี้ สแนปชอตฮีปยังรองรับจำนวนขอบและโหนดการบรรจุที่มากขึ้น (หลายร้อยล้าน) (332350576)

ปัญหาใน Chromium: 327337527

Lighthouse 11.7.1

ตอนนี้แผง Lighthouse เรียกใช้ Lighthouse 11.7.1 แล้ว ดูรายการการเปลี่ยนแปลงทั้งหมด

การเปลี่ยนแปลงที่สำคัญอย่างหนึ่งคือการเลิกใช้งานการรองรับปลั๊กอิน Publisher Ads ซึ่งล้าสมัยในเวอร์ชันนี้

ก่อนและหลังการเพิ่มการรองรับปลั๊กอินโฆษณาของผู้เผยแพร่โฆษณา

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

ปัญหาใน Chromium: 772558

ไฮไลต์อื่นๆ

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

  • ตอนนี้แผงโปรแกรมอัดได้ออกจากสถานะตัวอย่างอย่างเป็นทางการแล้ว (329271496)
  • ตอนนี้ Console จะไม่แสดงข้อผิดพลาดเมื่อตัวจัดรูปแบบที่กำหนดเองแสดงผล null สำหรับฟังก์ชัน body() ซึ่งเป็นลักษณะการทำงานที่ถูกต้อง (329400119)
  • แผงแหล่งที่มาอัปเดตตัวไฮไลต์ไวยากรณ์ โดยตอนนี้รองรับแฟล็ก v และ d ในนิพจน์ทั่วไปแล้ว
  • แท็บเครือข่าย > คุกกี้ แก้ไขข้อบกพร่องในการแมปคุกกี้ที่ได้รับการยกเว้นกับคุกกี้การตอบกลับ (41491846)
  • ตอนนี้แท็บองค์ประกอบ > รูปแบบจะทำสิ่งต่อไปนี้
    • แสดงกฎที่สืบทอดมาซึ่งมีการโอเวอร์โหลดอย่างสมบูรณ์พร้อมพร็อพเพอร์ตี้ที่กำหนดเอง (41489874)
    • ไฮไลต์ค่าที่ใช้ใน light-dark() โดยขึ้นอยู่กับธีมสี (331123816)

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

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

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

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

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

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