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

Sofia Emelianova
Sofia Emelianova
GitHub

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

การแสดงผลก่อนและหลังการลิงก์กับแอตทริบิวต์แองเคอร์ที่ชัดเจนและโดยนัย

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

ลักษณะก่อนและหลังการลิงก์ popovertarget กับองค์ประกอบ popover

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

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

"ไม่ต้องหยุดชั่วคราวที่นี่" ที่มีประสิทธิภาพมากขึ้น

ตัวเลือก "ไม่หยุดชั่วคราวที่นี่เลย" ช่วยป้องกันไม่ให้ 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

ข้อมูล 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)
  • คอนโซล: แก้ไขข้อบกพร่องที่แสดงข้อความคอนโซลที่เหมือนกันหลายรายการเมื่อไปยังส่วนต่างๆ โดยใช้แคชย้อนกลับ/ไปข้างหน้า (40894153)
  • การตั้งค่า: เพิ่มไอคอนตัวช่วยข้างแท็บทั้งหมด

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools