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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 40924349

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

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

ปัญหาของ 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 และแสดงไว้ในการติดตามประสิทธิภาพ เช่น

ปัญหาเกี่ยวกับ 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 DevTools

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

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

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

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