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

Jecelyn Yeen

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่ข้อมูลอ้างอิงเกี่ยวกับฟีเจอร์ของเครื่องบันทึกเสียง

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

ปัญหาใน Chromium: 1257499

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

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

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

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

รองรับการวางเมาส์เหนือเหตุการณ์ในเครื่องบันทึก

ปัญหาใน 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 สาธิตนี้ ในส่วนตัวแฮนเดิลโปรโตคอล ให้พิมพ์ "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 ที่กฎในแผงรูปแบบ

ตอนนี้คุณจะดูและแก้ไขกฎ @ ของ @scopeCSS ได้ในบานหน้าต่างรูปแบบ

@scopeกฎ @ เป็นส่วนหนึ่งของข้อกำหนด CSS Cascading and Inheritance Level 6 กฎเหล่านี้ช่วยให้นักพัฒนาแอปกำหนดขอบเขตของกฎสไตล์ใน CSS ได้

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

@scope ที่กฎในแผงรูปแบบ

ปัญหาใน Chromium: 1337777

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

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

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

ปัญหาใน Chromium: 1335338, 1333411

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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