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

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

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

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

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

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

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

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

ตอนนี้แทร็กเครือข่ายจะทําสิ่งต่อไปนี้

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

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

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

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

ดูตัวอย่างแทร็กที่กำหนดเองในหน้าเดโมนี้ ในประสิทธิภาพ > การตั้งค่าการบันทึก ให้เปิดcheck_box ข้อมูลชิ้นงาน เริ่มการบันทึกประสิทธิภาพ คลิก Add new 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

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

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

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

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