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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

  • ข้อยกเว้นหรือการปฏิเสธสัญญาจากฟังก์ชันในตัว
  • "การยกเลิก" เบรกพอยต์ 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)
  • การตั้งค่า: เพิ่มไอคอนตัวช่วยข้างแท็บทั้งหมด

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

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

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

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

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

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