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

การเล่นซ้ำแบบทีละขั้นตอนในโปรแกรมอัดเสียง

ตอนนี้คุณตั้งค่าเบรกพอยท์และเล่นการไหลเวียนของผู้ใช้ซ้ำทีละขั้นตอนในแผงโปรแกรมอัดเสียงได้แล้ว

หากต้องการตั้งค่าเบรกพอยท์ ให้คลิกจุดสีน้ำเงินถัดจากขั้นตอน เล่นโฟลว์ผู้ใช้ซ้ำ การเล่นซ้ำจะหยุดชั่วคราวก่อนดำเนินการตามขั้นตอนนี้ จากที่นี่ คุณสามารถเล่นซ้ำ ดำเนินการ 1 ขั้นตอน หรือยกเลิกการเล่นซ้ำได้

ฟีเจอร์นี้ช่วยให้คุณเห็นภาพและแก้ไขข้อบกพร่องของขั้นตอนการใช้งานของผู้ใช้ได้อย่างง่ายดาย

โปรดดูข้อมูลเพิ่มเติมที่ข้อมูลอ้างอิงฟีเจอร์ของโปรแกรมอัดเสียง

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

รองรับเหตุการณ์การวางเมาส์เหนือเหตุการณ์ในแผงโปรแกรมอัดเสียง

ขณะนี้โปรแกรมอัดเสียงรองรับการเพิ่มขั้นตอนวางเมาส์เหนือ (วางเมาส์) ด้วยตนเองในไฟล์บันทึกเสียง

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

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

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

Largest Contentful Paint (LCP) ในแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

LCP เป็นเมตริกสำคัญที่มุ่งเน้นผู้ใช้เป็นหลักสำหรับการวัดความเร็วในการโหลดที่รับรู้ ตอนนี้คุณดูเส้นทางที่สำคัญและสาเหตุที่แท้จริงของ Largest Contentful Paint (LCP) ได้แล้ว

ในบันทึกการแสดง ให้คลิกป้าย LCP ในไทม์ไลน์ คุณดูคะแนน LCP, วิธีแก้ไขทรัพยากรที่ทำให้ LCP ช้าลง และดูเส้นทางวิกฤติสำหรับทรัพยากร LCP ได้ในแผงรายละเอียด

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

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

ระบุการกะพริบของข้อความ (FOIT, FOUT) ว่าเป็นสาเหตุที่เป็นไปได้ที่ทำให้เกิดการเปลี่ยนเลย์เอาต์

ตอนนี้แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพจะตรวจหาแฟลชของข้อความที่มองไม่เห็น (FOIT) และแฟลชของข้อความที่ไม่มีการจัดรูปแบบ (FOUT) ซึ่งเป็นสาเหตุที่เป็นไปได้ของการเปลี่ยนเลย์เอาต์

หากต้องการดูสาเหตุที่แท้จริงที่เป็นไปได้ของการเปลี่ยนเลย์เอาต์ ให้คลิกภาพหน้าจอในแทร็กการเปลี่ยนเลย์เอาต์

ดูหัวข้อเพิ่มประสิทธิภาพการโหลดและการแสดงผล WebFont เพื่อเรียนรู้เทคนิคในการป้องกันการเปลี่ยนเลย์เอาต์

ปัญหาเกี่ยวกับ Chromium: 1334628, 1328873

ตัวแฮนเดิลโปรโตคอลในแผงไฟล์ Manifest

ตอนนี้คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อทดสอบการลงทะเบียนตัวแฮนเดิลโปรโตคอล URL สําหรับ Progressive Web App (PWA)

การลงทะเบียนตัวแฮนเดิลโปรโตคอล URL ช่วยให้ PWA ที่ติดตั้งสามารถจัดการลิงก์ซึ่งใช้โปรโตคอลที่เฉพาะเจาะจง (เช่น magnet, web+example) เพื่อประสบการณ์การใช้งานที่ผสานรวมมากขึ้น

ไปที่ส่วนตัวแฮนเดิลโปรโตคอลผ่านแอปพลิเคชัน > แผงไฟล์ Manifest คุณสามารถดูและทดสอบโปรโตคอลทั้งหมดที่มีได้ที่นี่

เช่น ติดตั้ง PWA เดโมนี้ ในส่วน Protocol Handlers ให้พิมพ์ "americano" แล้วคลิก Test Protocol เพื่อเปิดหน้ากาแฟใน PWA

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

ป้ายเลเยอร์บนสุดในแผงองค์ประกอบ

ใช้ป้ายเลเยอร์บนสุดเพื่อทำความเข้าใจแนวคิดของเลเยอร์ด้านบนและเห็นภาพว่าเนื้อหาของเลเยอร์ด้านบนมีการเปลี่ยนแปลงอย่างไร

เมื่อเร็วๆ นี้องค์ประกอบ <dialog> มีความเสถียรในเบราว์เซอร์ต่างๆ เมื่อเปิดกล่องโต้ตอบ ข้อความนั้นจะเข้าไปอยู่ในเลเยอร์บนสุด เนื้อหาระดับบนสุดจะแสดงทับเนื้อหาอื่นๆ ทั้งหมด

โดยในdemoนี้ ให้คลิกเปิดกล่องโต้ตอบ

เพื่อช่วยในการแสดงภาพองค์ประกอบเลเยอร์บนสุด เครื่องมือสำหรับนักพัฒนาเว็บจะเพิ่มคอนเทนเนอร์เลเยอร์บนสุด (#top-layer) ลงในแผนผัง DOM อยู่หลังแท็กปิด </html>

หากต้องการข้ามจากองค์ประกอบคอนเทนเนอร์เลเยอร์บนสุดไปยังองค์ประกอบแผนผังเลเยอร์บนสุด ให้คลิกปุ่มแสดงข้างองค์ประกอบหรือฉากหลังขององค์ประกอบในคอนเทนเนอร์เลเยอร์บนสุด

ถัดจากองค์ประกอบแผนผังเลเยอร์บนสุด (เช่น องค์ประกอบกล่องโต้ตอบ) ให้คลิกป้ายเลเยอร์บนสุดเพื่อข้ามไปยังคอนเทนเนอร์เลเยอร์บนสุด

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

แนบข้อมูลการแก้ไขข้อบกพร่อง Wasm ขณะรันไทม์

ตอนนี้คุณสามารถแนบข้อมูลการแก้ไขข้อบกพร่อง DWARF สำหรับ Wasm ระหว่างรันไทม์ได้แล้ว ก่อนหน้านี้แผงแหล่งที่มารองรับเฉพาะการแนบการแมปแหล่งที่มาลงในไฟล์ JavaScript และ Wasm เท่านั้น

เปิดไฟล์ Wasm ในแผงแหล่งที่มา คลิกขวาที่ตัวแก้ไขแล้วเลือกเพิ่มข้อมูลการแก้ไขข้อบกพร่อง DWARF... เพื่อแนบข้อมูลการแก้ไขข้อบกพร่องตามต้องการ

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

สนับสนุนการแก้ไขแบบเรียลไทม์ระหว่างการแก้ไขข้อบกพร่อง

ขณะนี้คุณแก้ไขฟังก์ชันบนสุดในสแต็กได้โดยไม่ต้องรีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องแล้ว

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

ด้วยการอัปเดตนี้ โปรแกรมแก้ไขข้อบกพร่องจะรีสตาร์ทฟังก์ชันโดยอัตโนมัติโดยมีข้อจำกัดต่อไปนี้

• แก้ไขได้เฉพาะฟังก์ชันที่อยู่บนสุดเท่านั้นในขณะที่หยุดชั่วคราว
• ไม่มีการเรียกซ้ำในฟังก์ชันเดียวกันที่อยู่ถัดลงไปด้านล่าง

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

ดูและแก้ไข @scope ที่กฎในแผงรูปแบบ

คุณจะดูและแก้ไขกฎ @@scope ของ CSS ในแผงรูปแบบได้แล้ว

@scope ที่กฎเป็นส่วนหนึ่งของข้อกำหนดการ Cascading ของ CSS และการรับค่าระดับ 6 กฎเหล่านี้ช่วยให้นักพัฒนาแอปกำหนดขอบเขตกฎรูปแบบใน CSS ได้

เปิดหน้าสาธิตนี้และตรวจสอบไฮเปอร์ลิงก์ภายในองค์ประกอบ <div class=”dark-theme”> ในแผงรูปแบบ ให้ดูกฎ @@scope คลิกการประกาศกฎเพื่อแก้ไข

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

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

ต่อไปนี้เป็นการแก้ไขบางส่วนในการแมปแหล่งที่มาเพื่อปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องโดยรวม

• ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บช่วยแก้ไขตัวระบุการแมปแหล่งที่มาด้วยเครื่องหมายวรรคตอนได้อย่างเหมาะสมแล้ว ตัวลดขนาดที่ทันสมัยบางรายการ (เช่น esbuild) จะสร้างการแมปแหล่งที่มาที่ผสานรวมตัวระบุ พร้อมเครื่องหมายวรรคตอนที่ตามมา (จุลภาค วงเล็บ เซมิโคลอน)
• ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแปลค่าชื่อการแมปแหล่งที่มาสำหรับผู้สร้างด้วยการเรียก super วันที่
• การจัดทำดัชนี URL การแมปแหล่งที่มาแบบคงที่สำหรับ Canonical URL ที่ซ้ำกัน ก่อนหน้านี้ไม่มีการเปิดใช้งานเบรกพอยท์ในบางไฟล์เนื่องจากมี Canonical URL ซ้ำ

ปัญหาเกี่ยวกับ Chromium: 1335338, 1333411

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

การแก้ไขที่สำคัญในรุ่นนี้มีดังนี้

• นำคู่คีย์-ค่าพื้นที่เก็บข้อมูลในเครื่องออกจากตารางในแอปพลิเคชัน > อย่างถูกต้อง พื้นที่เก็บข้อมูลในเครื่อง เมื่อลบแล้ว (1339280)
• ตอนนี้ตัวอย่างสีปรากฏอย่างถูกต้องเมื่อดูไฟล์ CSS ในแผงแหล่งที่มา ก่อนหน้านี้ ตำแหน่งของพวกเขาถูกวางไว้ผิดที่ (1340062)
• แสดงรายการ Flex และตารางกริดของ CSS อย่างสม่ำเสมอในแผงเลย์เอาต์ รวมถึงแสดงเป็นป้ายในแผงองค์ประกอบ ก่อนหน้านี้รายการ Flex และตารางกริดหายไปแบบสุ่มในทั้ง 2 ที่ (1340441, 1273992)
• คุณสามารถใช้ลิงก์สคริปต์โฆษณาของครีเอเตอร์ใหม่สำหรับเฟรมโฆษณาหากเครื่องมือสำหรับนักพัฒนาเว็บพบสคริปต์ที่ทำให้เฟรมนี้มีป้ายกำกับว่าเป็นโฆษณา คุณสามารถเปิดเฟรมได้ผ่านแอปพลิเคชัน > เฟรม (1217041)

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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