หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

ทำความเข้าใจข้อผิดพลาดและคำเตือนในคอนโซลได้ดียิ่งขึ้นด้วย 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

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

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

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

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

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

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

สัญญาที่ปฏิเสธแล้วพบว่าถูกจับได้

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

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

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 ในแผงเครือข่ายได้เช่นเดียวกับที่คุณซ่อนคอลัมน์อื่นๆ ได้แล้ว คลิกขวาที่ชื่อคอลัมน์ใดก็ได้และล้างช่องทำเครื่องหมาย check_box_outline_blank Waterfall ในเมนูแบบเลื่อนลง

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

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

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

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

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

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

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

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

ปัญหา Chromium: 324282954

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

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

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

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

ปัญหาของ Chromium: 311439339

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

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

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

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

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

ปัญหา Chromium: 327337527

Lighthouse 11.7.1

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
ทวีตที่ @ChromeDevTools
แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ