หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 772558

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

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

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

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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