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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

ตัวเลือกเมนู "ถาม AI" และปุ่มที่เกี่ยวข้อง

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

แผงความช่วยเหลือจาก AI แบบใหม่ซึ่งตอบกลับพรอมต์

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

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

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

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

แท็บนวัตกรรม AI ใหม่

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แทร็ก "การเปลี่ยนแปลงเลย์เอาต์" ก่อนและหลังการอัปเดต และแท็บ "สรุป" ที่จัดระเบียบใหม่

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

ลักษณะก่อนและหลังเพิ่มบันทึก "การเปลี่ยนแปลงเลย์เอาต์" ไปยังมุมมองเมตริกแบบเรียลไทม์

ปัญหา Chromium: 369100729

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

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

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

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

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

ปัญหา Chromium: 41006273

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

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

ลักษณะก่อนและหลังย้ายการตั้งค่า "การทำงานพร้อมกันของฮาร์ดแวร์" ไปยังแผงเซ็นเซอร์

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

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

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

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

รายการการละเว้นในสแต็กเทรซก่อนและหลังการปรับปรุง

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

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

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

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

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

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

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

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

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

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

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

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

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