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

Sofia Emelianova
Sofia Emelianova
GitHub

Recorder รองรับการส่งออกไปยัง Puppeteer สำหรับ Firefox

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

ก่อนและหลังเพิ่มตัวเลือก "Puppeteer สำหรับ Firefox" ลงในเมนูส่งออกของเครื่องบันทึก

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

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

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

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

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

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

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

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

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

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

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

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

ก่อนและหลังแสดงการติดตามสแต็กสำหรับการเรียกใช้ performance.mark และ performance.measure

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

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

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

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

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

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

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

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

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

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

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

ตอนนี้องค์ประกอบ > รูปแบบจะเติมคุณสมบัติกริดโดยอัตโนมัติได้มากขึ้น

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

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

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

Lighthouse 12.2.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 12.2.0

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

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

ปัญหาใน Chromium: 772558

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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