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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1326481

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในการสาธิตนี้ ให้คลิกเปิดกล่องโต้ตอบ

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

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

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

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

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

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

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

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

ALT_TEXT_HERE

ปัญหา Chromium: 1341255

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

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

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

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

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

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

ปัญหา Chromium: 1334484

ดูและแก้ไขกฎ @scope at ในแผงสไตล์

ตอนนี้คุณสามารถดูและแก้ไข CSS @scope at-rules ในแผงรูปแบบได้แล้ว

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

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

@scope at rules ในแผงสไตล์

ปัญหา Chromium: 1337777

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

การแก้ไขแผนที่ซอร์สโค้ดบางส่วนเพื่อปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องโดยรวมมีดังนี้

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

ปัญหา Chromium: 1335338, 1333411

ไฮไลต์อื่นๆ

การแก้ไขที่น่าสังเกตในรุ่นนี้ ได้แก่

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

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

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

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

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

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

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