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

Sofia Emelianova
Sofia Emelianova

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

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

รายชื่อประเทศที่ได้รับการสนับสนุนใหม่ในยุโรป

กรีซ โครเอเชีย ไซปรัส เดนมาร์ก นอร์เวย์ เนเธอร์แลนด์ เบลเยียม บัลแกเรีย โปรตุเกส โปแลนด์ ฝรั่งเศส ฟินแลนด์ มอลตา เยอรมนี ลักเซมเบิร์ก ลัตเวีย ลิทัวเนีย สโลวาเกีย สวีเดน สโลวาเกีย สวีเดน สาธารณรัฐเช็ก ออสเตรีย อิตาลี เอสโตเนีย ไอร์แลนด์ ฮังการี

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

ข้อมูลเชิงลึกจาก Gemini สําหรับข้อผิดพลาดในคอนโซล

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

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

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

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

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

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

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

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

เมนูคลิกขวาสําหรับคําขอที่มีตัวเลือก "แสดงในแผงเครือข่าย"

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

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

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

แทร็กที่กำหนดเองในแผงประสิทธิภาพ

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

รายละเอียดในแทร็กเวลา

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

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

ปัญหา Chromium: 345418915

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

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

คัดลอกตัวเลือกสําหรับคําขอที่ระบุเท่านั้น

ภาพรวมกองข้อมูลที่เร็วขึ้นด้วยแท็ก HTML ที่มีชื่อและมีความกระชับมากขึ้น

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

ออบเจ็กต์ที่จัดกลุ่มตามแท็ก HTML ที่มีชื่อ

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

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

ปัญหาเกี่ยวกับ 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 ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วของเว็บไซต์

ปัญหา Chromium: 772558

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

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

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

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

ไฮไลต์อื่นๆ

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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