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

Sofia Emelianova
Sofia Emelianova
GitHub

โปรแกรมอัดเสียงรองรับการส่งออกไปยัง Puppeteer สำหรับ Firefox

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

ลักษณะก่อนและหลังเพิ่มตัวเลือก "Puppeteer for Firefox" ลงในเมนูส่งออกของโปรแกรมอัด

ดูข้อมูลเพิ่มเติมได้ที่ WebDriver BiDi - อนาคตของการทํางานอัตโนมัติข้ามเบราว์เซอร์

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

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

การสังเกตการณ์เมตริกแบบเรียลไทม์

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

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

การสังเกตการณ์แบบเรียลไทม์เกี่ยวกับเมตริกในแผงประสิทธิภาพ

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

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

พบคำขอเครือข่ายในการค้นหา

ดูสแต็กเทรซของการเรียกใช้ performance.mark และ performance.measure

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

ภาพก่อนและหลังที่แสดงสแต็กเทรซสำหรับ Performance.mark และ Performance วัดผลการเรียกใช้

ดูข้อมูลเพิ่มเติมได้ที่ปรับแต่งข้อมูลประสิทธิภาพด้วย Extensibility API

ใช้ข้อมูลที่อยู่ทดสอบในแผงป้อนข้อความอัตโนมัติ

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

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

ลักษณะก่อนและหลังเพิ่มตัวเลือกข้อมูลทดสอบการป้อนข้อความอัตโนมัติลงในเมนูแบบเลื่อนลงของช่องแบบฟอร์มที่อยู่

การปรับปรุงแผงองค์ประกอบ

เวอร์ชันนี้มีการปรับปรุงแผงองค์ประกอบ 2-3 อย่าง

บังคับใช้สถานะเพิ่มเติมสำหรับองค์ประกอบที่เฉพาะเจาะจง

ตอนนี้ส่วน :hov ในองค์ประกอบ > สไตล์จะมีคลาสจำลองเพิ่มเติมที่คุณเปิดใช้แบบบังคับได้ ตัวเลือกชุดใหม่จะอยู่ในรายการแบบเลื่อนลงของสถานะบังคับเฉพาะองค์ประกอบ และจะใช้กับองค์ประกอบบางอย่างที่คุณเลือกเท่านั้น เช่น <label> และ <input> มีชุดตัวเลือกที่แตกต่างกัน

ก่อนและหลังการเพิ่มความสามารถในการบังคับสถานะขององค์ประกอบที่เฉพาะเจาะจง

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

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

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

ลักษณะก่อนและหลังเพิ่มตัวเลือกการเติมข้อความอัตโนมัติเมื่อคุณแก้ไขชื่อเส้นตาราง

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

Lighthouse 12.2.0

ตอนนี้แผง Lighthouse จะเรียกใช้ Lighthouse 12.2.0 แล้ว

การอัปเดตนี้มีการแก้ไขข้อบกพร่องหลายรายการ ดูรายการการเปลี่ยนแปลงทั้งหมด

ดูข้อมูลเบื้องต้นในการใช้แผง Lighthouse ใน DevTools ได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วเว็บไซต์

ปัญหา Chromium: 772558

ไฮไลต์อื่นๆ

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

  • องค์ประกอบ
    • แก้ไขข้อบกพร่องในการแสดงผลที่ไม่ถูกต้องสำหรับพร็อพเพอร์ตี้ความยาวเกินขนาด 357020613
    • เปลี่ยนชื่อ position-try-options เป็น position-try-fallbacks ตามข้อกำหนด
    • ตอนนี้การรีเฟรชหน้าเว็บจะคืนค่าโหนดที่เลือกแม้จะอยู่ใน iframe 40719145
    • การช่วยเหลือพิเศษ: โปรแกรมอ่านหน้าจอจะอ่านออกเสียงปุ่มแสดงองค์ประกอบ 357382536
  • ประสิทธิภาพ > เครือข่าย: ตอนนี้ตัวเลือกเมนูแสดงในเครือข่ายจะเปิดแท็บส่วนหัวของคำขอเครือข่ายที่เกี่ยวข้อง
  • คอนโซล:
    • ตอนนี้ข้อผิดพลาดจากส่วนขยาย C/C++ จะไม่บังคับเปิดคอนโซล 356320158
    • แก้ไขข้อบกพร่องของ import.meta ในโมดูล JS ในการไม่ประเมินผลเมื่อหยุดชั่วคราว 40743793
  • หน่วยความจำ: แก้ไขข้อบกพร่องที่ "คืนค่าเครื่องมือเก็บที่ละเว้น" ไม่แสดงขึ้นหลังจากละเว้นเครื่องมือเก็บ 327337527

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

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

ติดต่อทีม Chrome DevTools

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

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

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