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

ข้อมูลเชิงลึกเกี่ยวกับคอนโซลจาก Gemini จะเผยแพร่ในประเทศส่วนใหญ่ในยุโรป

เวอร์ชันนี้รองรับข้อมูลเชิงลึกเกี่ยวกับคอนโซลจาก Gemini ในประเทศส่วนใหญ่ในยุโรป

หากคุณอาศัยอยู่ในประเทศเหล่านั้น ตอนนี้คุณขอให้ Gemini ให้ข้อมูลเชิงลึกในคอนโซลได้เลย เพื่อให้คุณเข้าใจข้อผิดพลาดและคำเตือนได้ดียิ่งขึ้น

การอัปเดตแผงประสิทธิภาพ

การอัปเดตนี้ปรับปรุงประสิทธิภาพแผงประสิทธิภาพบางประการ

แทร็กเครือข่ายที่ปรับปรุงแล้ว

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

ในขณะนี้ แทร็กเครือข่ายจะทำงานดังต่อไปนี้

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

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

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

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

ดูตัวอย่างแทร็กที่กำหนดเองในหน้าสาธิตนี้ ในประสิทธิภาพ > การตั้งค่าการจับภาพ ให้เปิดcheck_box ข้อมูลส่วนขยาย เริ่มบันทึกประสิทธิภาพโดยคลิก Add Corgi ใหม่ในหน้าการสาธิต จากนั้นหยุดบันทึก คุณจะเห็นแทร็กที่กำหนดเองในการติดตามซึ่งมีเหตุการณ์พร้อมด้วยเคล็ดลับเครื่องมือและรายละเอียดที่กำหนดเองในแท็บสรุป

กล่าวโดยสรุปคือ หากต้องการขยายข้อมูลประสิทธิภาพ ให้ส่งโครงสร้างที่เฉพาะเจาะจงไปยังพารามิเตอร์ measureOption.detail หรือ markOption.detail ของการเรียก API ของ performance.measure() หรือ performance.mark()

รายละเอียดในการติดตามระยะเวลา

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

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

คัดลอกคำขอที่ระบุทั้งหมดในแผงเครือข่าย

แทนที่จะคัดลอกบันทึกเครือข่ายทั้งหมด แผงเครือข่ายจะช่วยให้คุณใช้ตัวกรองและคัดลอกเฉพาะคำขอในรายการได้

ฮีพสแนปชอตที่เร็วขึ้นด้วยแท็ก HTML ที่มีชื่อและเป็นระเบียบน้อยลง

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

ประสิทธิภาพของการตั้งค่าcheck_box รวมค่าตัวเลขในการจับภาพ มีการเร่งการทำงาน เปิดโดยค่าเริ่มต้น และนำออกจากแผงหน่วยความจำ

หากต้องการรวมออบเจ็กต์ภายในในสแนปชอตด้วยตนเอง ให้เปิด การตั้งค่า ก่อน การตั้งค่า > การทดสอบ > check_box แสดงตัวเลือกเพื่อแสดงตัวเลือกภายในในฮีปสแนปชอต แล้วเปิดcheck_box แสดงภายใน (...) ในแผงหน่วยความจำ

ปัญหาเกี่ยวกับ Chromium: 41490040, 343341610, 42203857

เปิดแผงภาพเคลื่อนไหวเพื่อจับภาพภาพเคลื่อนไหวและแก้ไข @keyframes แบบสด

ตอนนี้แผงภาพเคลื่อนไหวจะดำเนินการต่อไปนี้ได้

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

ดูการทำงานของฟีเจอร์ทั้ง 2 อย่างได้ในวิดีโอต่อไปนี้

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

Lighthouse 12.1.0

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

การอัปเดตนี้มีการเปลี่ยนแปลงหลายประการ ซึ่งรวมถึงการนำเมตริก First Meaningful Paint (FMP) แบบเก่าออกเพื่อใช้ประโยชน์จาก Largest Contentful Paint (LCP) แทน ดูรายการการเปลี่ยนแปลงทั้งหมด

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

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

การช่วยเหลือพิเศษ

เวอร์ชันนี้มีการปรับปรุงการช่วยเหลือพิเศษดังต่อไปนี้

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

ปัญหาเกี่ยวกับ Chromium: 349939551, 343942719, 349334243, 349428374

ไฮไลต์เบ็ดเตล็ด

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

• ประสิทธิภาพ:
  • แทร็กเครือข่าย: เพิ่มเหตุการณ์การเชื่อมต่อ WebSocket 331351979
  • ตอนนี้แผงประสิทธิภาพจะซูมดูกิจกรรมของเทรดหลักที่มีการเข้าชมมากที่สุดได้อย่างถูกต้อง 345599356
  • แก้ไขข้อบกพร่องในการอัปโหลดไฟล์การติดตามที่ไม่ถูกต้อง ตอนนี้ระบบจะป้องกันการอัปโหลดทุกประเภทยกเว้น .json หรือ .gz 349864878 ที่ถูกต้อง
• องค์ประกอบ > รูปแบบ:
  • ค่าพร็อพเพอร์ตี้ความยาวแบบเลื่อนลงของหน่วยเลิกใช้งานไปแล้วในตอนนี้เป็น 41495618
  • แก้ไขการแปลงพร็อพเพอร์ตี้ที่ใช้งานอยู่สำหรับกฎ at ที่ซ้อนกัน 346732737
  • ส่วน @position-try ที่ไม่ได้ใช้งานจะเป็นสีเทา 40246493
• แอปพลิเคชัน
  • คุกกี้: แก้ไขข้อบกพร่องที่ไม่รีเฟรชคุกกี้เมื่อรีเฟรช ให้คลิก 348683488
  • พื้นที่เก็บข้อมูลในเครื่อง: ขณะนี้คุณสามารถจัดเรียงตามคีย์ตามตัวอักษร 341129585 ได้แล้ว

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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