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

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

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

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

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

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

ทีม DevTools หวังเป็นอย่างยิ่งว่าจะได้รับความคิดเห็นจากคุณ คุณสามารถแสดงความคิดเห็นได้ที่ crbug.com/364805393

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

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

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

Console Insights อยู่ห่างออกไปเพียงคลิกเดียว

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

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

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

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

ใส่คำอธิบายประกอบและแชร์ข้อมูลเชิงลึกด้านประสิทธิภาพ

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

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

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

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

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

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

ระบุการเลื่อนเลย์เอาต์มากเกินไปได้ง่ายขึ้น

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

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

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

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

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

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

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

ปัญหาใน Chromium: 41006273

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

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

ปัญหาใน Chromium: 371463665

ไม่สนใจสคริปต์ที่ไม่ระบุชื่อและมุ่งเน้นที่โค้ดของคุณในสแต็กเทรซ

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

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

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

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

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

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

• ตอนนี้การวางซ้อนตารางกริดใน Viewport จะแสดงตารางกริดสำหรับโหมดการเขียน 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 หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

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

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

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

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

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