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

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

เวอร์ชันนี้รองรับข้อมูลเชิงลึกของ Console โดย 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 ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ 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

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

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

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

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