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

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

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

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

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

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

แทร็ก Enhanced Network

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

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 345418915

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

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

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

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

เราได้เพิ่มความเร็วในการทำงานของช่องทำเครื่องหมาย check_box Include numerical values in capture ซึ่งเปิดไว้โดยค่าเริ่มต้น และนำออกจากแผงหน่วยความจำ

หากต้องการรวมออบเจ็กต์ภายในไว้ในสแนปชอตด้วยตนเอง ให้เปิดการตั้งค่า Settings > Experiments > check_box Show option to expose internals in heap snapshots ก่อน จากนั้นเปิด check_box Expose internals (...) ในแผงMemory

ปัญหาเกี่ยวกับ 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
  • แก้ไขการแก้ปัญหาพร็อพเพอร์ตี้ที่ใช้งานอยู่สำหรับกฎ @ ที่ซ้อนกัน 346732737
  • ตอนนี้@position-tryส่วนที่ไม่ได้ใช้งานจะเปลี่ยนเป็นสีเทาแล้ว 40246493
• การสมัคร
  • คุกกี้: แก้ไขข้อบกพร่องที่ทำให้คุกกี้ไม่รีเฟรชเมื่อคลิกรีเฟรช 348683488
  • พื้นที่เก็บข้อมูลในเครื่อง: ตอนนี้คุณจัดเรียงตามคีย์ตามลำดับตัวอักษรได้แล้ว 341129585

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

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

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

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

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

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

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