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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

การรองรับกฎ @position-try รายการในองค์ประกอบ > รูปแบบ

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

ก่อนและหลังกฎการสนับสนุน @position-try CSS

ดูข้อมูลเพิ่มเติมได้ในการแนะนำ CSS Anchor Positioning API

ปัญหา Chromium: 40279608

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 40574989

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

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

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

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

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

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

ปัญหา Chromium: 324282954

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

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

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

Chrome 126 เวอร์ชันถัดไปจะปรับปรุง UI นี้มากขึ้น

ปัญหาของ Chromium: 311439339

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

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

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

ลักษณะก่อนและหลังการเพิ่มตัวเลือกในการละเว้นผู้ดูแล

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

ปัญหา Chromium: 327337527

Lighthouse 11.7.1

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

การเปลี่ยนแปลงที่เห็นได้ชัดคือการรองรับปลั๊กอินโฆษณาของผู้เผยแพร่โฆษณาซึ่งเลิกใช้งานแล้วในเวอร์ชันนี้

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

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

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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