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

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

Sofia Emelianova

ตรวจสอบการวางตำแหน่งแท็ก Anchor ของ CSS ในแผงองค์ประกอบ

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

ก่อนและหลังการลิงก์ Anchor แบบชัดเจนและโดยนัย

นอกจากนี้ ตอนนี้ค่าแอตทริบิวต์ popovertarget ลิงก์กับองค์ประกอบ popover ใน DOM

ก่อนและหลังการเชื่อมโยงเป้าหมายป็อปโอเวอร์กับองค์ประกอบป๊อบโอเวอร์

ปัญหาเกี่ยวกับ Chromium: 289900232, 330306231

การปรับปรุงแผงแหล่งที่มา

เวอร์ชันนี้มีการปรับปรุงหลายอย่างในแผงแหล่งที่มา

"ไม่ต้องหยุดชั่วคราวที่นี่" ที่ได้รับการปรับปรุง

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

ข้อยกเว้นหรือสัญญาการปฏิเสธจากฟังก์ชันในตัว
เบรกพอยท์ "การยกเลิก" DOM, การดึงข้อมูล/XHR และ CSP
การถอดแยกชิ้นส่วน Wasm

ดูขั้นตอนการทำงานจริง

ปัญหา Chromium: 40924349

Listener เหตุการณ์ของการเลื่อนสแนปใหม่

รายการแหล่งที่มา > เบรกพอยท์ของ Listener เหตุการณ์ > ตัวควบคุม มี Listener ที่เกี่ยวข้องกับ scroll-snap 2 รายการ ได้แก่ scrollsnapchange และ scrollsnapchanging เหตุการณ์เหล่านี้จะเริ่มทำงานเมื่อคุณเลื่อนคอนเทนเนอร์ที่เลื่อนในลักษณะที่อาจทำให้คอนเทนเนอร์สแนปไปยังองค์ประกอบใหม่

ก่อนและหลังการเพิ่ม Listener เหตุการณ์ซึ่งเกี่ยวข้องกับการเลื่อน

ปัญหาของ Chromium: 40286359

การปรับปรุงแผงเครือข่าย

เวอร์ชันนี้มีการปรับปรุงหลายอย่างในแผงเครือข่าย

อัปเดตค่าที่กำหนดล่วงหน้าสำหรับการควบคุมเครือข่าย

แผงเครือข่ายได้รับการอัปเดตค่าที่กำหนดล่วงหน้าของการควบคุม ซึ่งได้แก่ 4G ความเร็วสูงใหม่, 3G ความเร็วสูงเปลี่ยนชื่อเป็น 4G ช้า และ 3G ช้า เปลี่ยนชื่อเป็น 3G ซึ่งจะสอดคล้องกับค่าที่กำหนดล่วงหน้าของ Lighthouse มากกว่า

ค่าที่กำหนดล่วงหน้าก่อนและหลังการอัปเดตการควบคุมเครือข่าย

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

ข้อมูลโปรแกรมทำงานของบริการในช่องที่กำหนดเองของรูปแบบ HAR

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

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

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

ส่งและรับเหตุการณ์ WebSocket ในแผงประสิทธิภาพ

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

บันทึกเหตุการณ์ "รับข้อความ WebSocket" ที่บันทึกในการติดตามประสิทธิภาพ

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

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

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

การช่วยเหลือพิเศษ: ตอนนี้โปรแกรมอ่านหน้าจออ่านเนื้อหาของข้อความในคอนโซลเมื่อเลื่อนผ่านบันทึกด้วยแป้นลูกศรขึ้นและลง (344484979)
แหล่งที่มา
- หน้า: ตอนนี้ตัวเลือกเมนูบันทึกเป็นจะบันทึกไฟล์โมดูล Wasm เป็นไบนารี Wasm ที่ถูกต้องแทนข้อความ Base64 (40784130)
- สแต็กการเรียกใช้: นำคำต่อท้าย (async) ออกจากคำอธิบายเฟรมการโทรที่ไม่พร้อมกัน เปลี่ยนไฮไลต์จากตัวเอียงเป็นตัวหนา (343750870)
หน่วยความจำ: นำ InternalNodes ที่มีขนาด 0 ที่ไม่จำเป็นออกจากสรุปฮีปสแนปชอต (340200025)
เครือข่าย: แก้ไขข้อบกพร่องที่ทำให้ไม่สามารถแสดงการแสดงตัวอย่างเนื้อหาการตอบกลับสตรีมมิงสำหรับคำขอที่เพิ่งเริ่มแต่ยังไม่ได้รับเหตุการณ์ responseReceived (338340752)
ประสิทธิภาพ:
- สถิติตัวเลือก: เพิ่มเคล็ดลับเครื่องมือเพื่ออธิบายสำหรับคอลัมน์ %-of-Slow-Path-Non-Matches (324282954)
- โหมดการกำหนดค่าการติดตาม: ปุ่มกำหนดค่าแทร็กให้เสร็จสิ้นได้ย้ายไปอยู่ด้านขวาล่าง (345256274)
คอนโซล: แก้ไขข้อบกพร่องที่แสดงข้อความที่เหมือนกันหลายรายการในคอนโซลเมื่อไปยังส่วนต่างๆ โดยใช้ Back-Forward Cache (40894153)
การตั้งค่า: เพิ่มไอคอนตัวช่วยถัดจากแท็บทั้งหมด (330213867)

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

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

ติดต่อทีม Chrome DevTools

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

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