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

Sofia Emelianova
Sofia Emelianova
GitHub

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

ก่อนและหลังการลิงก์ Anchor ที่ชัดเจนและไม่ชัดเจน

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

ก่อนและหลังการลิงก์ popovertarget กับองค์ประกอบป๊อปโอเวอร์

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

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

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

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

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

ดูขั้นตอนดำเนินการ

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

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

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

ก่อนและหลังการเพิ่ม Listener เหตุการณ์ที่เกี่ยวข้องกับ scroll-snap

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

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

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

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

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

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

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

ข้อมูล Service Worker ในช่องที่กำหนดเองของรูปแบบ 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 หรือ Beta เป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

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

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

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

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