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

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ในการแนะนำ 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 ในเมนูแบบเลื่อนลง

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

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

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

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

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

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

ปัญหา Chromium: 324282954

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

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

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

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

ปัญหา Chromium: 311439339

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

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

หากต้องการละเว้นเครื่องมือเก็บ ให้เลือกออบเจ็กต์ และในส่วนRetainer ให้คลิกขวาที่เครื่องมือเก็บแล้วเลือกRetainerจากเมนูแบบเลื่อนลง เครื่องมือเก็บที่ละเว้นจะมีค่า 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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