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

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

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

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

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

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

แทร็ก Enhanced Network

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

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

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

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

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

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

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

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

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

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

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

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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

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