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

แก้ไขข้อบกพร่อง CSS ด้วย Gemini

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

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

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

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

ทีม DevTools หวังว่าจะได้รับฟังความคิดเห็นจากคุณ ทิ้งไว้ใน crbug.com/364805393

ควบคุมฟีเจอร์ AI ในแท็บการตั้งค่าเฉพาะ

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

ดูข้อมูลเพิ่มเติมได้ที่การตั้งค่า > นวัตกรรม AI

เข้าถึงข้อมูลเชิงลึกของ Console ได้ในคลิกเดียว

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

หากเข้าสู่ระบบ Chrome ให้เปิดฟีเจอร์เหล่านี้ในการตั้งค่า > นวัตกรรม AI เพียงเท่านี้ก็พร้อมใช้งานแล้ว

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

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

ใส่คำอธิบายประกอบและแชร์ผลลัพธ์ด้านประสิทธิภาพ

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

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

ดูข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพได้โดยตรงในแผงประสิทธิภาพ

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

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

ทีมเครื่องมือสำหรับนักพัฒนาเว็บหวังว่าจะได้รับความคิดเห็นเกี่ยวกับประโยชน์ของข้อมูลเชิงลึก วิธีปรับปรุงข้อมูลเชิงลึก และประสบการณ์การใช้งานเครื่องมือนี้ร่วมกับเครื่องมืออื่นๆ เช่น PageSpeed Insights และ Lighthouse โปรดแสดงความคิดเห็นได้ที่ crbug.com/371170842

ตรวจหาการเลื่อนเลย์เอาต์มากเกินไปได้ง่ายขึ้น

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

นอกจากนี้ มุมมองเมตริกแบบเรียลไทม์ยังจะได้รับบันทึกการเปลี่ยนแปลงเลย์เอาต์พร้อมคะแนนและองค์ประกอบอยู่ข้างๆ แท็บการโต้ตอบด้วย

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

ตรวจหาภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite

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

• ตั้งชื่อภาพเคลื่อนไหวตามพร็อพเพอร์ตี้ CSS ที่เกี่ยวข้อง (หากมี)
• ทำเครื่องหมายภาพเคลื่อนไหวที่ไม่ได้ผสมด้วยรูปสามเหลี่ยมสีแดงในแทร็ก
• แสดงเหตุผลของการเขียนข้อมูลไม่สำเร็จในแท็บสรุป

ดูข้อมูลเพิ่มเติมได้ที่ใช้เฉพาะพร็อพเพอร์ตี้คอมโพสิตและจัดการจำนวนเลเยอร์

ปัญหา Chromium: 41006273

การเกิดขึ้นพร้อมกันของฮาร์ดแวร์ย้ายไปที่เซ็นเซอร์

การตั้งค่าการทำงานพร้อมกันของฮาร์ดแวร์จะย้ายจากแผงประสิทธิภาพไปยังตำแหน่งที่เหมาะสมกว่า ซึ่งก็คือแผงเซ็นเซอร์

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

ละเว้นสคริปต์ที่ไม่ระบุตัวตนและมุ่งเน้นไปที่โค้ดในสแต็กเทรซ

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

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

นอกจากนี้ เมื่อคลิกขวาและบันทึกเป็น... บันทึกบันทึกคอนโซล ระบบจะไม่บันทึกข้อความแสดงเพิ่มเติม/น้อยลง

ปัญหาเกี่ยวกับ Chromium: 40279542, 40945570, 345248263

องค์ประกอบ > รูปแบบ: รองรับโหมดการเขียน sideways-* สำหรับการวางซ้อนแบบตารางกริดและคีย์เวิร์ดที่ใช้ทั่วทั้ง CSS

ตอนนี้แท็บองค์ประกอบ > สไตล์รองรับรายการต่อไปนี้แล้ว

• ตอนนี้การวางซ้อนตารางกริดในวิวพอร์ตจะแสดงตารางกริดสำหรับโหมดการเขียน sideways-rl และ sideways-lr
• แก้ปัญหาคีย์เวิร์ดสำหรับทั้ง CSS ในทางปฏิบัติแล้วหมายความว่า หาก inherit เป็นสี แท็บรูปแบบจะแสดงตัวเลือกสีอยู่ด้านข้าง

ปัญหาเกี่ยวกับ Chromium: 40280717, 40706051, 40501131

การตรวจสอบ Lighthouse สำหรับหน้าเว็บที่ไม่ใช่ HTTP ในโหมดช่วงเวลาและโหมดสแนปชอต

ตอนนี้ Lighthouse สร้างรายงานสำหรับหน้าที่ไม่ใช่ HTTP ในโหมดช่วงเวลาและโหมดสแนปชอตได้แล้ว

การช่วยเหลือพิเศษ

เวอร์ชันนี้มีการปรับปรุงการช่วยเหลือพิเศษดังต่อไปนี้

• ในแหล่งที่มา > ตัวแก้ไข คุณสามารถปิดแท็บที่มีไฟล์เปิดอยู่ โดยโฟกัสที่ปุ่ม X แล้วกด Enter หรือ Space
• ในประสิทธิภาพ ตอนนี้คุณเลือกรายการในการติดตามและกด Space เพื่อเปิดเมนูตามบริบทได้แล้ว
• ในประสิทธิภาพ แท็บข้อมูลเชิงลึกในแถบด้านข้างทางซ้ายจะเข้าถึงผ่านแป้นพิมพ์ได้ และสามารถ "กด Tab ผ่าน" ได้

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

ไฮไลต์อื่นๆ

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

• ตอนนี้การตั้งค่าการจำกัดความเร็วได้รับการซิงค์อย่างถูกต้องระหว่างแผงประสิทธิภาพและเครือข่ายแล้ว (370332090)
• แอปพลิเคชัน > บริการในเบื้องหลัง > การโหลดแบบคาดเดา > กฎมีปุ่มพิมพ์ {} ที่คล้ายกับแหล่งที่มา > เครื่องมือแก้ไข (40279147)
• นิพจน์แบบเรียลไทม์: ตอนนี้การกด Tab หลังจากเลือกตัวเลือกการเติมข้อความอัตโนมัติจะออกจากช่องแก้ไขแทนที่จะเยื้องข้อความ (349939551)
• องค์ประกอบ > สไตล์: anchor() และ anchor-size() รองรับไวยากรณ์ใหม่ซึ่งคุณสามารถจัดลําดับอาร์กิวเมนต์ใหม่และละเว้นทิศทาง anchor-size() ได้ (343516786) นอกจากนี้ยังมีการแสดงผลสำรองแบบคงที่ (365802559)
• เครือข่าย: แก้ไขตัวอย่าง GraphQL (369931288)
• ประสิทธิภาพ: ตอนนี้จะรายงานความคืบหน้าที่เพิ่มขึ้นของการโหลดและการประมวลผลร่องรอย
• WebAuthn: ตอนนี้อัปเดตข้อมูลเข้าสู่ระบบแบบไดนามิกที่แก้ไขโดยเมธอด signal* (368467199)
• WebAssembly: ตอนนี้คําเตือนในคอนโซลจะแจ้งให้ทราบหากมีสัญลักษณ์การแก้ไขข้อบกพร่องหลายรายการสําหรับโมดูล WebAssembly และโมดูลที่ใช้งานอยู่ (40879198, 369515221)
• ระบบจะนำการวางซ้อน Core Web Vitals ออกจากแท็บการแสดงผล 328487897
• ตอนนี้ฟีเจอร์ Generative AI ไม่จำเป็นต้องซิงค์การตั้งค่า Chrome

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

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

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

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

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

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

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