หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

นำเข้าและส่งออกโฟลว์ผู้ใช้ที่บันทึกไว้เป็นไฟล์ JSON

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

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

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

ส่งออกเป็นไฟล์ JSON ดาวน์โหลดข้อมูลที่บันทึกเป็นไฟล์ JSON
ส่งออกเป็นสคริปต์ @puppeteer/replay ดาวน์โหลดการบันทึกเป็นสคริปต์เล่นเตะหุ่นเชิดซ้ำ
ส่งออกเป็นสคริปต์ Puppeteer ดาวน์โหลดการบันทึกเป็นสคริปต์ Puppeteer

ดูเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างตัวเลือกเหล่านี้

ตัวเลือกการส่งออกในแผงโปรแกรมอัดเสียง

ปัญหา Chromium: 1257499

ดูเลเยอร์การเรียงซ้อนในแผงรูปแบบ

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

ในตัวอย่างนี้ มีการกำหนดเลเยอร์แบบ Cascade ไว้ 3 เลเยอร์ ได้แก่ page, component และ base ในแผงรูปแบบ คุณสามารถดูแต่ละเลเยอร์และสไตล์ได้

คลิกชื่อเลเยอร์เพื่อดูลำดับเลเยอร์ เลเยอร์ page มีความเฉพาะเจาะจงสูงสุด พื้นหลัง box จึงเป็นสีเขียว

ดูเลเยอร์การเรียงซ้อนในแผงรูปแบบ

ปัญหา Chromium: 1240596

รองรับฟังก์ชันสี hwb()

ตอนนี้คุณดูและแก้ไขรูปแบบสี HWB ในเครื่องมือสำหรับนักพัฒนาเว็บได้แล้ว

ในแผงรูปแบบ ให้กดแป้น Shift ค้างไว้และคลิกตัวอย่างสีที่ต้องการเพื่อเปลี่ยนรูปแบบสี เพิ่มรูปแบบสี HWB แล้ว

หรือจะเปลี่ยนรูปแบบสีเป็น HWB ในตัวเลือกสีก็ได้

ฟังก์ชันสี hwb()

ปรับปรุงการแสดงพร็อพเพอร์ตี้ส่วนตัว

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

พร็อพเพอร์ตี้ส่วนตัวในคอนโซล

ปัญหาเกี่ยวกับ Chromium: 1296855, https://crbug.com/1303407

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

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

ตอนนี้ Back/Forward Cache จะแสดงรหัสส่วนขยายซึ่งบล็อก bfcache เมื่อมี ( 1284548)
แก้ไขการรองรับการเติมข้อความอัตโนมัติสำหรับออบเจ็กต์ที่คล้ายอาร์เรย์, ชื่อคลาส CSS, map.get และแท็ก HTML (1297101, 1297491, 1293807, 1296983)
แก้ไขไฮไลต์ที่ไม่ถูกต้องเมื่อดับเบิลคลิกคำและยกเลิกการเติมข้อความอัตโนมัติ (1298437, 1298667)
แก้ไขแป้นพิมพ์ลัดสำหรับความคิดเห็นในแผงแหล่งที่มาแล้ว (1296535)
เปิดใช้การสนับสนุนอีกครั้งสำหรับการใช้แป้น Alt (ตัวเลือก) สำหรับการเลือกหลายรายการในแผงแหล่งที่มา (1304070)

[ทดลอง] ช่วงเวลาและโหมดสแนปชอตใหม่ในแผง Lighthouse

นอกเหนือจากโหมดการนําทางที่มีอยู่แล้ว แผง Lighthouse ตอนนี้ยังรองรับการวัดการไหลเวียนของผู้ใช้อีก 2 โหมด ได้แก่ ช่วงเวลาและสแนปชอต

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

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

ช่วงเวลาและโหมดสแนปชอตในแผงของ Lighthouse

ปัญหา Chromium: 772558

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

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

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

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

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