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

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

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

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

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

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

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

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

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

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

คำขอค้นหาในแทร็กเครือข่าย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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