มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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) และ Flash ของข้อความที่ไม่มีการจัดรูปแบบ (FOUT) อันเป็นสาเหตุที่เป็นไปได้ของการเปลี่ยนแปลงเลย์เอาต์

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1300613

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1313690

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

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

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

ALT_TEXT_HERE

ปัญหา Chromium: 1341255

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

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

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

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

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

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

ปัญหา Chromium: 1334484

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

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

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

เปิดหน้าเดโมนี้และตรวจสอบไฮเปอร์ลิงก์ภายในองค์ประกอบ <div class=”dark-theme”> ในแผงรูปแบบ ให้ดูกฎ @ @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

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

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

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

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

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