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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ 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" แล้วคลิก Test Protocol เพื่อเปิดหน้ากาแฟใน PWA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ALT_TEXT_HERE

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

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

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

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

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

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

การแก้ไขสดในระหว่างการแก้ไขข้อบกพร่อง

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

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

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

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

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

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

ปัญหาเกี่ยวกับ 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 หรือ เบต้า เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องทางพรีวิวเหล่านี้จะทำให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และพบปัญหาในเว็บไซต์ก่อนผู้ใช้

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59