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

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

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

ลองเลย ในแผงองค์ประกอบ ให้คลิกขวาที่องค์ประกอบ แล้วเลือกถาม AI หรือคลิกปุ่ม ที่เกี่ยวข้องข้างองค์ประกอบ DevTools จะเปิดแผงความช่วยเหลือจาก 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 เกี่ยวกับฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บหรือวิดีโอ YouTube เกี่ยวกับเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ

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

รายการทุกอย่างที่ครอบคลุมในซีรีส์มีอะไรใหม่ใน DevTools