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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

@position-try รองรับกฎในส่วนองค์ประกอบ > สไตล์

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

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

ดูข้อมูลเพิ่มเติมได้ที่ขอแนะนำ CSS Positioning Anchor API

ปัญหา Chromium: 40279608

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

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

กำหนดค่าการแสดงผลที่อ่านง่ายและการปิดวงเล็บอัตโนมัติ

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

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

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

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

ระบบจะถือว่าการปฏิเสธ Promise ที่จัดการแล้วเป็นการดำเนินการที่เสร็จสมบูรณ์

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

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

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

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

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

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

ตอนนี้คอนโซลจะแสดงลำดับสาเหตุของข้อผิดพลาดในสแต็กเทรซ (หากมี)

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

ก่อนและหลังการพิมพ์สแต็กเทรซที่มีคำนำหน้า "เกิดจาก"

ปัญหา Chromium: 40182832

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

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

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

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

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

ลักษณะก่อนและหลังการเพิ่มส่วนสำหรับคำแนะนำขั้นต้นโดยเฉพาะ

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

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

ซ่อนคอลัมน์ Waterfall

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

ลักษณะก่อนและหลังเพิ่มตัวเลือกในการซ่อนคอลัมน์ Waterfall

ปัญหา Chromium: 40574989

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

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

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

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

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

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

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

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

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

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

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

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

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