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

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

Sofia Emelianova

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

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

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่เชื่อมต่อองค์ประกอบต่างๆ เข้าด้วยกันด้วยการกำหนดตำแหน่ง Anchor ของ CSS

ปัญหา Chromium: 40279608

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

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

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

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

หากต้องการกำหนดค่าลักษณะการทำงานที่เกี่ยวข้อง ให้เลือกหรือล้างตัวเลือก 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

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

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

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

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

เคล็ดลับในช่วงต้นคือรหัสสถานะ 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 ดูรายการการเปลี่ยนแปลงทั้งหมด

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

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

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

ปัญหาของ Chromium: 772558

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

การแก้ไขและการปรับปรุงที่สำคัญในรุ่นนี้

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

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

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

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

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

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